How to stop text from scrolling beneath a nav bar

HTML-CSS
#1

how do i keep text from scrolling beneath this fixed nav bar? Below is my css and html.

#header-image {
  width: 70px;
  height: 75px;
}
#header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  z-index: 1;
 
}
nav > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  list-style: none;
}
h3, h4, h5 {
  font-size: 20px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
</head>
<header id="header">
  <img id="header-image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTSD6XziL97HnpjmqY794zMytKzR2RRnyacKXP__Kp6CA&s">
 <h1>Original Trombones</h1>
  <nav id="nav-bar">
    <ul>
      <li>features</li>
      <li>how it works</li>
      <li>pricing</li>
    </ul>
  </nav>
 </header>
<div id="main-text">
 <form id=form>
   <h2>Handcrafted, home-made masterpieces
</h2>
<input id="email" type="email" name="email" placeholder="Enter your email address" />
<input id="submit" type="button" value="Get Started" />
 </form>
  <h3>Premium Materials</h3>
  <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
  <h4>Fast Shipping</h4>
  <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
  <h5>Quality Assurance</h5>
  <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
  
  <video id="video" width="500px" height="500px">
    <source src="https://youtu.be/m6HgVhRCX04">
    </video>

<section id="box1">
  <div class="title">Tenor Trombone</div>
  <div class="price">$600</div>
  <div class="description"></div>
  <ul>
    <li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum.</li>
</ul>
<input class="select" value="SELECT" />
</section>

<section id="box2">
  <div class="title">Tenor Trombone</div>
  <div class="price">$900</div>
  <div class="description"</div>
  <ul>
    <li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum.</li>
</ul>
<input class="select" value="SELECT" />
</section>

<section id="box3">
  <div class="title">Tenor Trombone</div>
  <div class="price">$600</div>
  <div class="description"></div>
  <ul>
    <li>Plays similar to a Trumpet</li>
<li>Great for Jazz Bands</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum.</li>
</ul>
<input class="select" value="SELECT" />
</section>
</body>
<footer>
  <a href="https://freecodecamp.org">contact</a>
</footer>
</div>


  </html>
#2

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

#3

I’m going to guess without testing :slightly_smiling_face:

Give the header a background color?

#4

That is the point of having a fixed nav. But you have to push the main content down yourself because the fixed element is taken out of the normal document flow and won’t push it. And as said without a background color it is going to look odd (you can tell if it is in front or behind). You also want top: 0 on it to get it at the top of the page.

#5

yeah background color worked i just set it as white now everything looks like it scrolls underneath.

#6

alright i just copied the all the code because it seemed like it all needed to be seen to understand what was going on