In a mock project, there seems to be extra space at the bottom of this element.
https://i.sstatic.net/3s52c.jpg
I've reviewed the code thoroughly but I'm unable to pinpoint where the mistake lies. Can someone assist in identifying the error?
How can I eliminate the gap?
/* DESSERT OF THE DAY */
.container {
display: flex;
margin-top: 4em;
}
.image-2 {
background-image: url(_images/cupcake.jpeg);
height: 100vh;
background-position: center center;
width: 50vw;
}
.section-2 {
width: 50vw;
}
.section-2 h3 {
margin: 5% 35%;
font-family: 'Josefin Sans', sans-serif;
margin-bottom: 0%;
}
.section-2 h1 {
margin-left: 5%;
font-family: 'Abril Fatface', cursive;
font-size: 4em;
}
.section-2 p {
margin-left: 5%;
margin-top: 20%;
margin-right: 30%;
font-family: 'Josefin Sans', sans-serif;
line-height: 1.7em;
margin-bottom: 0%;
}
.cherry {
height: 3%;
margin-left: 5%;
margin-top: 2vh;
}
<!---DESERT OF THE DAY-->
<div class="container">
<div class="image-2"></div>
<div class="section-2">
<h3>Dessert of the Day:</h3>
<h1>Cherry butterscotch<br>cupcake</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint quibusdam corporis ex aut, quae nulla possimus voluptas rerum at a quaerat corrupti ratione et eveniet repellendus illum nobis omnis fugit. Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Laboriosam repellat velit quas doloremque magnam consectetur molestias eaque expedita? Laudantium quidem, officia consectetur officiis non at quam itaque sequi nostrum alias. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus
natus voluptas perferendis! Facere nihil suscipit commodi omnis tempore, provident aliquid nostrum officia excepturi maxime minus veritatis quae mollitia facilis aut.</p>
<img src="_images/cherry.jpeg" class="cherry">
</div>
</div>
<!--CUSTOMER REVIEWS-->
<div class="container-2">
<h1>What our customers say</h1>
</div>