Chciałbym aby te obramowania czarne kończyły się równo ze zdjęciem, mam na myśli żeby po lewej i prawej nie było tego białego oraz żeby pomiędzy tymi divami był odstęp, a nie że one są tak stłoczone.
Kod HTML:
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>MUTTI</title>
<meta name="description" content="Zobacz wszystko co powinieneś wiedzieć o pizzy"/>
<meta name="keywords" content="pizza, włoska pizza, domowe wypieki, gdzie zjeść, restauracje, toruń, przepis na pizze, przepis, obiad"
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="style.css"/>
<link href="https://fonts.googleapis.com/css?family=Caveat|Dancing+Script|Open+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display&display=swap" rel="stylesheet">
</head>
<section id="menu">
<div class="container">
<h1 class="naglowek_menu">Nasze Menu</h1></br>
<div class="row">
<div class="col-6 col-md-3 mr-auto ml-auto" style="border: solid black 3px" id="sniadanie">
<img src="img/sniadanie.jpg" class="img-fluid">
<h3>Śniadanie</h3>
<p class="food1">Zobacz Menu Śniadaniowe</p>
<p class="food">Poniedziałek-niedziela godz 9.30-12.00</p>
</div>
<div class="col-6 col-md-3" style="border: solid black 3px">
<img src="img/drinki.jpg" class="img-fluid">
<h3>Menu drinków</h3>
<p class="food">
Zobacz Naszą Kartę Drików
</p>
</div>
<div class="col-6 col-md-3" style="border: solid black 3px">
<img src="img/IMG_9462.JPG" class="img-fluid">
<h3>Menu dań</h3>
<p class="food">Zobacz Naszą Kartę dań</p>
</div>
<div class="col-6 col-md-3" style="border: solid black 3px">
<img src="img/wina.jpg" class="img-fluid">
<h3>Karta win</h3>
<p class="food">Zobacz Naszą Kartę win</p>
</div>
</div>
</div>
</section>
</article>
</main>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="js/bootsrap.min.js"></script>
<script>
$( document ).ready(function() {
$("button").click(function(){
$("#mainmenu").toggle();
});
});
</script>
KOD CSS:
.photos
{
text-align: center;
padding: 0;
}
.categories
{
text-align: center;
padding 0;
font-size: 15px;
}
.nagłówek
{
font-family: 'Dancing Script', cursive;
margin-top:35px;
}
h2
{
font-family: 'Caveat', cursive;
font-size: 25px;
}
h3
{
font-family: 'Caveat', cursive;
text-align: center;
color: #000;
padding: 5px;
margin-top:10px;
}
#text
{
background-color: #191d21;
}
.naglowek_menu
{
font-size: 60px;
font-weight: 700;
color: #000;
text-align: center;
font-family: 'Dancing Script', cursive;
margin-top: 50px;
margin-bottom: 40px;
}
#sniadanie
{
margin-right: 20px;
}
#dania
{
display: inline-block;
width:100%;
}
#drinki
{
display: inline-block;
width:100%;
}
#wina
{
display: inline-block;
width:100%;
}
.hide {
display: none;
}
.show {
display: block;
}
.food
{
color: #A9A9A9;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
text-align: center;
padding-bottom: 40px;
}
.food1
{
color: #A9A9A9;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
text-align: center;
}
