为什么这个 div 有一个额外的空隙？我如何解决它？

Question

这是练习项目的一部分，元素底部有一些额外的 space。

我已经检查了代码，但我不知道哪里出错了。有人可以帮忙找出错误吗？

如何消除间隙？

/*  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>

Answer 1

/*  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>

为什么这个 div 有一个额外的空隙？我如何解决它？

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

html

css

flexbox

margin