Main containter

Hello,

I am not having an issue with the functionality but the CSS. When I click one of the nav links on the left, all the content to the right of the nav bar goes on top of it. It’s as if clicking one of the nav links breaks the nav bar barrier and hovers on top of it.

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36 Edg/94.0.992.50

Challenge: Build a Technical Documentation Page

<!-- HTML -->
 <body>
   
      <nav id="navbar">
        <header id="nav-header">The Story of Luna</header>
        <ul id="nav-ul">
          <li class="nav-li"><a href="#Introduction" class="nav-link">Introduction</a></li>
          <li class="nav-li"><a href="#What_you_should_know" class="nav-link">What you should know</a></li>
          <li class="nav-li"><a href="#Luna's_personality" class="nav-link">Luna's personality</a></li>
          <li class="nav-li"><a href="#Her_history" class="nav-link">Her history</a></li>
          <li class="nav-li"><a href="#Her_now" class="nav-link">Her now</a></li>
        </ul> 
      </nav>
  

  <main id="main-doc">
    
    <section class="main-section" id="Introduction">
      <header>
        Introduction
      </header>
      
      <p>
        
      </p>
      <p>
        
      </p>
      
      <code>
        
      </code>
      
    </section>
    
    
    <section class="main-section" id="What_you_should_know">
      <header id="Introduction">
        What you should know
      </header>
      
      <p>
        
      </p>
      <p>
        
      </p>
      
      <code>
        
      </code>
    </section>
    
    
    <section class="main-section" id="Luna's_personality">
      <header>
        Luna's personality
      </header>
      
      <p>
        
      </p>
      <p>
        
      </p>
      
      <code>
        
      </code>
      
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </section>
    
    
    <section class="main-section" id="Her_history">
      <header>
        Her history
      </header>
      <p>
        
      </p>
      <p>
        
      </p>
      
      <code>
        
      </code>
    </section>
    
    
    <section class="main-section" id="Her_now">
      <header>
        Her now
      </header>
      
      <p>
        
      </p>
      <p>
        
      </p>
      
      <code>
        
      </code>
    </section>
    
    
  </main>
  
  
</body>

/* CSS*/

*
{
  margin: 0;
}

/* NAV BAR */
#navbar {
  position: fixed;
  width: 302px;
  height: 100%;
  border-style: solid;
  border-width: 1px;
  overflow-y: scroll;
  
}

#nav-header
{
  text-align: center;
  margin-top: 15px;
  margin-bottom: 20px;
}


.nav-li
{
  list-style: none;
  border: 1px solid;
  padding: 10px;
  cursor: pointer;
  position: relative;
  right: 21px;
  margin-bottom: 25px;
}

.nav-link
{
  text-decoration: none;
  color: black;
}


/* BODY CONTAINER */
#main-doc
{
  margin-left: 304px;
  width: 100%;
  position: absolute;
}





@media (max-width: 400px;)
{
  p{
font-size: 12px;}
}

Remove the width: 100% on #main-doc also you shouldn’t need position: absolute


I’ve edited your post 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.

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