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

Question

这是一个练习项目的一部分，其中元素底部有一些额外的空间。

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

如何消除差距？

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