Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:
So I have finished the project but have some personal questions about better design.

My first central question is, why does all my elements (everything under main) collapse to the left when I click on my nav options? Originally the nav options would disappear and all existing headers and p’s would collapse to the left( I have no idea how to prevent the navs from disappearing). They still do collapse to the left even when I made my position of the #Side-Bar which contains my nav, fixed as well as absolute (The reason I made it fixed is so that the #Side-Bar is the whole height of the page and so that the nav wouldn’t disappear). This is making it extremely hard to test my nav elements when I am pretty sure they work.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Technical</title>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <div id="Side-Bar">
      <nav id="navbar">
        <header>JS Documentation</header>
        <a href="#Intro" class="nav-link">Intro</a>
        <a href="#What" class="nav-link">What</a>
        <a href="#Java" class="nav-link">Java</a>
        <a href="#Hello" class="nav-link">Hello</a>
        <a href="#Variables" class="nav-link">Variables</a>
      </nav>
    </div>

    <main id="main-doc">

      <section class="main-section" id="Intro">
        <header class="first">Intro</header>
        <p>1</p>
        <p>2</p>
        <code></code>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </section>

      <section class="main-section" id="What">
        <header>What</header>
        <p></p>
        <p></p>
        <code></code>
        <ul>
          <li></li>
          <li></li>
        </ul>
      </section>

      <section class="main-section" id="Java">
        <header>Java</header>
        <p></p>
        <p></p>
        <code></code>
      </section>

      <section class="main-section" id="Hello">
        <header>Hello</header>
        <p></p>
        <p></p>
        <code></code>
      </section>

      <section class="main-section" id="Variables">
        <header>Variables</header>
        <p></p>
        <p></p>
        <code></code>
      </section>

    </main>  
  </body>

</html>
/* file: styles.css */
#Side-bar{
  height:100%;
  width:300px;
  background-color:white;
  border:solid;
  position:absolute;
  position:fixed;
  top:0;
  left:0;
}

#main-doc{
  position:relative;
  left:320;
}

section header{
  font-weight:bold;
  font-size:25px;
  position:relative;
  left:-10px;
  padding-top:20%; 
}

.first{
  padding-top:0%;
}

nav > header{
  font-weight:bold;
  font-size:30px;
  padding-left:30px;
  padding-bottom:10px;
  border-bottom:1px solid black;
}

nav a{
  display:flex;
  height:40px;
  padding-left:20px;
  padding-top:10px;
  font-size:20px;
  border-bottom:1px solid black;
}

nav a:last-of-type{
  border:none;
}

@media (min-width:20px){
  p {
    font-size:1.5rem;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:105.0) Gecko/20100101 Firefox/105.0

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

In your ‘main-doc’ selector you have ‘left’ property set to 320. What units do you use here?