如何消除显示弯曲造成的div之间的间隙？

Question

我的容器和页面 div 之间不断出现间隙，我可以通过从 css 中删除 display:flex 来消除它，但这会使视频、覆盖层和内容错位。我怎样才能在不抛弃一切的情况下消除差距？

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container{
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.background-clip);
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: transparent;
}
.container .content{
    opacity: 0.75;
    margin-bottom: -100px;
}
.background-clip{
    right: 0;
    bottom: 0;
    z-index: -2;
    position: absolute;
}
.overlay{
    position: absolute;
    height: 100vh;
    width: 100vw;
    background-color: black;
    opacity: 0.4;
    right: 0;
    bottom: 0;
    z-index: -1;
}
@media (min-aspect-ratio:16/9){
    .background-clip{
        width: 100%;
        height: auto;
    }
}
@media (max-aspect-ratio:16/9){
    .background-clip{
        width: auto;
        height: 100%;
    }
}
.Pages{
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh;
}
section{
    height: 100vh;
    display: flex;
    scroll-snap-align: start;
    margin-top: -4px;
}

<div class="container">
  <div class="videomain">
    <video autoplay loop muted plays-inline class="background-clip" playsinline width="16" height="9">
      <source src="Background video.mp4" type="video/mp4">
    </video>
  </div>
  <div class="overlay"></div>
  <div class="content">
    <img src="Image.png" width="550">
  </div>
</div>
<div class="Pages">
  <section class="Holmespage">
      <div class="Holmes1">HOLMES</div>
  </section>
  <section class="Parkpage">
      <div class="Park1">PARK</div>
  </section>
  <section class="Contactpage">
      <div class="ContactME1">CONTACT</div>
  </section>
</div>

我尝试将边距更改为 0、负数和正数，包括分别尝试顶部和底部边距，不确定是否是因为我没有将其应用到正确的位置。还尝试使用 Display: flex box 但这不起作用，并使用 flex: 1

Answer 1

尝试将

display: flex;

和

gap: 0;

添加到您的班级

.Pages

。