I want to add a section under a video section but it doesn’t align perfectly under the first section. How can I solve this?

I am trying to include a section under a previous section but it doesn’t show and align the way I want it to be. The first section is a text section with video background but the next section added doesn’t show in the preview. Even in the stack overflow snippet the “about us” section is behind the video section. How can I solve this problem?

const menuToggle = document.querySelector('.toggle');
     const showcase = document.querySelector('.showcase');

     menuToggle.addEventListener('click', () => {
       menuToggle.classList.toggle('active');
       showcase.classList.toggle('active');
     })

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}


header
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 40px 100px;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header .logo
{
  color: #fff;
  text-transform: uppercase;
  cursor: pointer;
}
.toggle
{
  position: relative;
  width: 60px;
  height: 60px;
  background: url(https://i.ibb.co/HrfVRcx/menu.png);
  background-repeat: no-repeat;
  background-size: 30px;
  background-position: center;
  cursor: pointer;
}
.toggle.active
{
  background: url(https://i.ibb.co/rt3HybH/close.png);
  background-repeat: no-repeat;
  background-size: 25px;
  background-position: center;
  cursor: pointer;
}
.showcase
{
  position: absolute;
  right: 0;
  width: 100%;
  min-height: 100vh;
  padding: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #000000;
  transition: 0.5s;
  color: #ffff;
  z-index: 2;

}
.showcase.active
{
  right: 300px;
}



.showcase video
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}
.overlay
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0394f4;
  mix-blend-mode: overlay;
  color: #001540;
}
.text
{
  position: relative;
  z-index: 10;
}

.text h2
{
  font-size: 2.5em;
  font-weight: 800;
  color: #fff;
  line-height: 1em;
  text-transform: uppercase;
}
.text h3
{
  font-size: 5em;
  font-weight: 700;
  color: #64A8F0;
  line-height: 1em;
  text-transform: uppercase;
}
.text p
{
  font-size: 1.1em;
  color: #fff;
  margin: 20px 0;
  font-weight: 400;
  max-width: 700px;
}
.text a
{
  display: inline-block;
  font-size: 1em;
  background: #fff;
  padding: 10px 30px;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
  margin-top: 10px;
  color: #111;
  letter-spacing: 2px;
  transition: 0.2s;
}
.text a:hover
{
  letter-spacing: 6px;
}



.social
{
  position: absolute;
  z-index: 10;
  bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.social li
{
  list-style: none;
}
.social li a
{
  display: inline-block;
  margin-right: 20px;
  filter: invert(1);
  transform: scale(0.5);
  transition: 0.5s;
}
.social li a:hover
{
  transform: scale(0.5) translateY(-15px);
}


.menu
{
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000026;

}
.menu ul
{
  position: relative;
}
.menu ul li
{
  list-style: none;
}
.menu ul li a
{
  text-decoration: none;
  font-size: 24px;
  color: #ffff;
}
.menu ul li a:hover
{
  color: #64A8F0;
}



.section{
    width: 100%;
    min-height: 100vh;
    background-color: #ddd;
}
.container{
    width: 80%;
    display: block;
    margin:auto;
    padding-top: 100px;
}
.content-section{
    float: left;
    width: 55%;
}
.image-section{
    float: right;
    width: 40%;
}
.image-section img{
    width: 100%;
    height: auto;
}
.content-section .title{
    text-transform: uppercase;
    font-size: 28px;
}
.content-section .content h3{
    margin-top: 20px;
    color:#5d5d5d;
    font-size: 21px;
}
.content-section .content p{
    margin-top: 10px;
    font-family: sans-serif;
    font-size: 18px;
    line-height: 1.5;
}
.content-section .content .button{
    margin-top: 30px;
}
.content-section .content .button a{
    background-color: #3d3d3d;
    padding:12px 40px;
    text-decoration: none;
    color:#fff;
    font-size: 25px;
    letter-spacing: 1.5px;
}
.content-section .content .button a:hover{
    background-color: #a52a2a;
    color:#fff;
}
.content-section .social{
    margin: 40px 40px;
}
.content-section .social i{
    color:#a52a2a;
    font-size: 30px;
    padding:0px 10px;
}
.content-section .social i:hover{
    color:#3d3d3d;
}
@media screen and (max-width: 768px){
    .container{
    width: 80%;
    display: block;
    margin:auto;
    padding-top:50px;
}
.content-section{
    float:none;
    width:100%;
    display: block;
    margin:auto;
}
.image-section{
    float:none;
    width:100%;

}
.image-section img{
    width: 100%;
    height: auto;
    display: block;
    margin:auto;
}
.content-section .title{
    text-align: center;
    font-size: 19px;
}
.content-section .content .button{
    text-align: center;
}
.content-section .content .button a{
    padding:9px 30px;
}
.content-section .social{
    text-align: center;
}



@media (max-width: 991px)
{
  .showcase,
  .showcase header
  {
    padding: 40px;
  }
  .text h2
  {
    font-size: 1.5em;
  }
  .text h3
  {
    font-size: 3em;
  }

<!DOCTYPE html>
<html lang="en" dir="ltr">

  <title>Think Tank</title>

</html>
<head>

</head>

<body>
  <style>
      @import url('styles.css');
  </style>

<section class="showcase">

   <header>
     <h2 class="logo"></h2>
     <div class="toggle"></div>
   </header>

   <video src="webasset.mov" muted loop autoplay></video>
   <div class="overlay"></div>
   <div class="text">
     <h2>Willkommen auf </h2>
     <h3>Think Tank</h3>
     <p>Beispiel.</p>
     <a href="#">THINK kaufen</a>
   </div>
   <ul class="social">
     <li><a href="#"><img src="https://i.ibb.co/x7P24fL/facebook.png"></a></li>
     <li><a href="https://twitter.com/ThinkTank__?t=RxrP3KIpS8-L6UOfjpd7Ww&s=08"><img src="https://i.ibb.co/Wnxq2Nq/twitter.png"></a></li>
     <li><a href="https://www.instagram.com/think.tank.official/"><img src="https://i.ibb.co/ySwtH4B/instagram.png"></a></li>
   </ul>
 </section>
 <div class="menu">
   <ul>
     <li><a href="index.html">Home</a></li>
     <li><a href="section">Unser Token</a></li>
     <li><a href="#">NFT (COMING SOON)</a></li>
     <li><a href="#">Das Team</a></li>
     <li><a href="#">Kontakt</a></li>
   </ul>
 </div>


    <div class="section">
        <div class="container">
            <div class="content-section">
                <div class="title">
                    <h1>About Us</h1>
                </div>
                <div class="content">
                    <h3>Lorem ipsum dolor sit amet, consectetur adipisicing</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat.</p>
                    <div class="button">
                        <a href="">Read More</a>
                    </div>
                </div>
                <div class="social">
                    <a href=""><i class="fab fa-facebook-f"></i></a>
                    <a href=""><i class="fab fa-twitter"></i></a>
                    <a href=""><i class="fab fa-instagram"></i></a>
                </div>
            </div>
            <div class="image-section">
                <img src="image/img one.jpg">
            </div>
        </div>
    </div>


         <!--===== MAIN JS =====-->
       <script src="main.js"></script>

</body>
</html>