title: How to add more html elements below a video background that overflows into the navigation bar?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
  }
  body{
    font-family: montserrat;
  }
  nav{
    height: 85px;
    width: 100%;
    z-index:1001;
  }
  
  label.logo{
    color: rgb(255, 255, 255);
    font-size: 35px;
    line-height: 80px;
    padding: 0 100px;
    font-weight: bold;
  }
  nav ul{
    float: right;
    margin-right: 20px;
  }
  nav ul li{
    display: inline-block;
    line-height: 80px;
    margin: 0 5px;
  }
  nav ul li a{
    color: white;
    font-size: 17px;
    padding: 7px 13px;
    border-radius: 3px;
    text-transform: uppercase;
  }
  a.active,a:hover{
    background: #1b9bff;
    transition: .5s;
  }
  .checkbtn{
    font-size: 30px;
    color: white;
    float: right;
    line-height: 80px;
    margin-right: 40px;
    cursor: pointer;
    display: none;
  }
  #check{
    display: none;
  }
  @media (max-width: 952px){
    label.logo{
      font-size: 30px;
      padding-left: 50px;
      position: fixed;
    }
    nav ul li a{
      font-size: 16px;
    }
  }
  
  @media (max-width: 858px){
    .checkbtn{
      display: block;
    }
  
    label.logo{
      color: white;
      font-size: 35px;
      line-height: 80px;
      padding: 0 0px;
      font-weight: bold;
    }
  
    nav {
      z-index: 1001;
    }
  
    ul{
      position: fixed;
      width: 100%;
      height: 100vh;
      background: #2c3e50;
      top: 80px;
      left: -100%;
      text-align: center;
      transition: all .5s;
    }
    nav ul li{
      display: block;
      margin: 50px 0;
      line-height: 30px;
    }
    nav ul li a{
      font-size: 20px;
    }
    a:hover,a.active{
      background: none;
      color: #0082e6;
    }
    #check:checked ~ ul{
      left: 0;
    }
  }
  
  
  .vid-background {
    z-index: -100;
    width:100%;
    height:80vh;
    overflow:hidden;
    position:fixed;
    top:0;
    left:0;
  }
  
  .reg-element {
    width:100%;
    height:80vh;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" type="text/css" href="styles.css"/&gt;
      &lt;title&gt;SnowWarrior Landing Page&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;nav&gt;
        &lt;input type="checkbox" id="check"&gt;
        &lt;label for="check" class="checkbtn"&gt;
          &lt;img src="https://img.icons8.com/ios-glyphs/30/000000/menu--v1.png" alt="menu"/&gt;
        &lt;/label&gt;
        &lt;label class="logo"&gt;SnowWarrior&lt;/label&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt; &lt;a href="#"&gt;Shop&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt; &lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
  
      &lt;div class="vid-background"&gt;
        &lt;video autoplay loop muted&gt;
          &lt;source src="./assets/winter1.mp4"&gt;
        &lt;/video&gt;
      &lt;/div&gt;
  
      &lt;section&gt;&lt;/section&gt;
  
      &lt;div class="reg-element"&gt;
        &lt;span&gt;Just saying&lt;/span&gt;
      &lt;/div&gt;
      
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/GmlW3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GmlW3.png" alt="In the attached image, which is actually a video I'm asking how to add text and other HTML elements below the video." /></a></p>
  <p>The video overflowing into the navbar is by choice since that is what I'm trying to achieve. However, when I try to add more div elements with text in there, it shows up behind the video instead of below the video. I'm very new to HTML and CSS (just dived into these two days ago) so I may be doing some things wrong here. But I would be glad if someone could point the right thing out to me.</p>
  <p>Edit: Does anyone know how to embed a video into an HTML so it shows on StackOverflow?</p>