Navbar on top of my content

can someone please help… i have no idea why my navbar is on top of everything and i don’t know what to do.

<header id="header">
  
  <img id="header-img" src="https://15logo.net/wp-content/uploads/2017/02/Herbal-Tea-800x800.jpg">
  
  
  <div>
  <nav id="nav-bar" class="nav-link">
    <ul>
      <button class="block"><a class="active" href="#home">Home</a></button>
    <button class="block"><a href="#news">News</a></button>
      <button class="block"><a href="#contact" >Contact</a></button>
      <button class="block"><a href="#about" >About</a></button>
    </ul>
  </nav>

  </div>

  <section>
    
    <h2>Sign up to try our premium home made tea.</h2>
    <div id="email">
      
      <form id="form">
   <input type="email"
            name="email"
            id="email" 
            class="form-control"
            Placeholder="Enter your Email"
            Required/>
      <div class="submit">    
           <input id="submit1" type="submit" value="Get Started" class="btn">
        <div>
      </form>
        
        <div id="video-page">
        </div>
        
body{
 
}

#header{
  display
  width: 100%;
  position: fixed :

}

#header-img{
  width: 150px;
  height:auto;
  position: fixed;
}

#nav-bar{
  position:fixed;
   width: 100%;
  padding-left: 100px;
  padding-top: 15px;
  padding-right: 100px;
   overflow: hidden;
  font-family: Arial;
  color: white;
  
}

ul{
 display: flex ;
 justify-content: space-around;
 }

.block{
  display: block;
  width: 100%;
  border: none;
  background-color: #00cc00;
  color: white;
  padding: 30px 100px;
  font-size: 16px;
  cursor: pointer;
}

.block:hover {
  background-color: #ddd;
  color: black;}

a {
  color: white;
  font-size: 20px;
}
  
h2{
  text-align: center;
  padding-left: 200px;
}

#form{
  padding-left: 200px;
}

#email{
   display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
   
  
}

.submit{
  padding-top: 10px;
   text-align: center;
 
}

#video-page{
  height: 400px;
  background-color: #90ee90; 
}

For starters, you need a closing </header> tag in there.

You’ve given <nav> a position: fixed which means it is taken out of the regular flow of elements and placed at the top. Because it is out of the flow, the other elements act as if it is not there and thus the <section> starts at the top of the page, underneath the <nav>. So you will want to push the <section> down the page a little until it is completely out from under <nav>.

Also, if you need further help, please put your project in codepen or github or something similar. You want to make it easy for us to help you :slight_smile: