I keep getting a gap between my container and pages divs, I can get rid of it by removing display:flex from the css, but that misaligns the video, overlay and content. How can I get rid of the gap without throwing everything off?
HTML:
<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>

css:

*{
    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;
}

I’ve tried to change the margin to 0, negative and positive amounts, including trying on the top and bottom margin separately, not sure if it’s cause I’m not applying it to the right place. Also tried to use Display: flex box but that didn’t work, and using flex: 1