why is there an extra gap in this div? how do I fix it?

Question

This is a section from a practice project, where there's some extra space at the bottom of the element.

I've checked the code but I can't figure where I've gone wrong. Could someone help find the error?

How do i remove 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>

_"extra space at the bottom of the element."_ Which element? — j08691, Jan 25 '22 at 16:47
Another thing: when i make the browser size something like, 50%, the image height takes up the whole space and the gap isn't there anymore - i'm a beginner so i have no clue what's happening — fatima_r24, Jan 25 '22 at 16:48
Your mean is the same gap between .container and .container2? so set `margin-bottom: -20px;` to .container! — Arman Ebrahimi, Jan 25 '22 at 17:06
Excuse me. Of course, I said -20px based on the image not loaded! can try `margin-bottom: -400px;` for `.container`. I examined that in the snippet code. — Arman Ebrahimi, Jan 25 '22 at 17:18
See my answer. is it how? Of course, this makes a gap after that. — Arman Ebrahimi, Jan 25 '22 at 17:21

Arman Ebrahimi · Accepted Answer · 2022-01-25T17:27:29.620

/*  DESSERT OF THE DAY  */

.container {
  display: flex;
  margin-top: 4em;
  margin-bottom: -400px;
}
.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="https://s4.uupload.ir/files/1-6-5_ssnb.jpg" class="cherry">
  </div>
</div>
<!--CUSTOMER REVIEWS-->
<div class="container-2">
  <h1>What our customers say</h1>
</div>

I edited my answer Do you want "h1 customer review" to go to the top of the page? — Arman Ebrahimi, Jan 25 '22 at 17:30
In this case, set `.container-2{position: absolute;top: 0;left: 10px;}` for `.container-2` — Arman Ebrahimi, Jan 25 '22 at 17:35

why is there an extra gap in this div? how do I fix it?

1 Answers1