Why isn't my Main element to the right of my nav bar when on a computer full screen?

Question

I am working on a code pen and am having an issue where initially my main element would be exactly to the right of my nav bar (on the left side with height = 100%), but not it is overlapped by the nav bar, even though I added a margin-left earlier wide enough to allow the main to be seen. Here is the CSS code:

   html,
    body {
      min-width: 290px;
      color: hsla(214, 100%, 39%, 1);
      font-family: "Germania One", Helvetica, sans-serif;
      font-size: 17px;
      line-height: 1.25;
      background-color: hsla(239, 60%, 40%, 0.49);
    }
    
    h1 {
      color: black;
    }
    
    code {
      background-color: hsla(179, 8%, 40%, 0.49);
      border-radius: 3px;
      color: white;
      display: block;
      text-align: left;
      white-space: pre;
      position: relative;
      word-break: normal;
      word-wrap: normal;
      line-height: 1.5;
      padding: 10px;
      margin: 15px;
    }
    #navbar {
      z-index: 1;
      position: fixed;
      background-color: hsla(246, 81%, 24%, 1);
      min-width: 290px;
      top: 0px;
      left: 0px;
      width: 300px;
      height: 100%;
      border-right: solid;
      border-color: hsla(264, 80%, 39%, 1);
    }
    
    header {
      color: white;
      font-size: 30px;
      margin: 10px;
      text-align: center;
      font-size: 1.8em;
      font-weight: thin;
    }
    
    #navbar a {
      color: white;
      text-decoration: none;
      cursor: pointer;
    }
    
    #navbar ul {
      list-style: none;
      height: 88%;
      overflow-y: auto;
      overflow-x: hidden;
    }
    
    #navbar li {
      border: 1px solid;
      border-bottom-width: 0px;
      padding: 8px;
      padding-left: 45px;
      position: relative;
      left: -50px;
      width: 100%;
    }
    
    #main-doc {
      position: absolute;
      margin-left: 310px;
      padding: 20px;
      margin-bottom: 110px;
    }
    
    #main-doc header {
      text-align: left;
      margin: 0px;
    }
    
    section article {
      margin: 15px;
      font-size: 0.96em;
    }
    
    section li {
      margin: 10px 0px 0px 10px;
    }
    
    #Boulder-img {
      width: 80%;
    }
    
    #Sherpas-img {
      width: 90%;
    }
    
    @media only screen and (max-width: 815px) {
      /* For mobile phones: */
      #navbar ul {
        border: 1px solid;
        height: 207px;
      }
      code {
        overflow-x: scroll;
      }
      #navbar {
        position: absolute;
        top: 0;
        padding: 0;
        margin: 0;
        width: 100%;
        max-height: 275px;
        border: none;
        z-index: 1;
        border-bottom: 2px solid;
      }
      #main-doc {
        position: relative;
        margin-left: 0px;
        margin-top: 270px;
      }
      #main-doc section {
        color: black;
        /*     padding-top: 240px; */
      }
    }
    @media only screen and (max-width: 400px) {
      #navbar {
        font-size: .75em;
      }
      #navbar ul {
        height: 222px;
      }
      }
      #main-doc {
        margin-left: -10px;
      }
      code {
        margin-left: -20px;
        width: 100%;
        padding: 15px;
        padding-left: 10px;
        padding-right: 45px;
        min-width: 233px;
      }
    }

    <nav id="navbar">
  <header>
    FCC Technical Documentation</header>
  <ul>
    <li><a href="#Explanation" class="nav-link">Explanation</a></li>
    <li><a href="#Early_Life" class="nav-link">Early Life</a></li>
    <li><a href="#First_Move" class="nav-link">First Move</a></li>
    <li><a href="#Some_Technical_Documentation" class="nav-link">Some Technical Documentation</a></li>
    <li><a href="#Present_Day" class="nav-link">Present Day</a></li>
  </ul>
</nav>

<main id="main-doc">
  <section class="main-section" id="Explanation">
    <header>
      Explanation
    </header>
    <article>
      <p>
        Introduction paragraph
        <br>
        <code>
        &ltcode&gt
        <u>insert example code here</u>
        &lt/code&gt
      </code>
        <br>
        <p>It looks like I will have to do 5 of these code elements in the project. In order to display the symbol "&lt", I have to type
          <br>
          <code>
          &+l+t
        </code>
          <br> using those characters above without the plus signs. "&gt" is made by using the following in the same way:
          <br>
          <code>
          &+g+t
        </code>
          <br> I don't know how to display those characters together without it automatically displaying as those carrot symbols. I will ask on StackOverFlow (coding website/forum).
        </p>
        <p>
          I could do a documentation page describing what I already know and will use to make this page but I can't be bothered :p.
        </p>
        <p>
          So I posted my question on StackOverFlow, perhaps I will update in this section (sorry if it is long) if I get an answer. I've gotten the idea to use the code elements to do small features within the page to explain how I made certain parts of it. I also
          read through the prompt completely (glanced over it), and it seems that that was the only road bump. Thanks and enjoy.
          <br>:)
        </p>
    </article>
  </section>

  <section class="main-section" id="Early_Life">
    <header>
      Early Life
    </header>
    <article>
      <p>
        Early life paragraph
        
      </p>
      <h1>first photo header</h1>
      <img src="" alt="" id="">
      <p>
        <h1>header for story</h1>
        story paragraph
      </p>
      <img src="" alt="" id="">
      <p>To code in the photos above, I used the img element. The coding goes as follows:
        <br>
        <code>
      &ltimg src="linkofimagegoeshere" alt="descriptionincasephotofails" id="goodtohaveidtoalterappearancewithCSS"&gt
    </code>
      </p>
    </article>
  </section>

  <section class="main-section" id="First_Move">
    <header>
      First Move</header>
    <article>
      <p>
        first move paragraph
      </p>
      <p>
        I later moved to a small town in blank for high school
      </p>
    </article>
  </section>

  <section class="main-section" id="Some_Technical_Documentation">
    <header>
      Some Technical Documentation
    </header>
    <article>
      <p>
        So it turns out that you can display the code of how to code in a carrot symbol inside of a coding element without having what you type turn into a carrot itself. Sorry if that made no sense, this is hard to describe unless it is seen visually. Here is
        the code that you can enter in order to show &+l+t and &+g+t without them turning into carrots (basically ampersand has it's own sort of reference code).
        <br>
        <code>
        &amp;ltcode&amp;gt turns into &ltcode&gt
      </code>
        <br> In order to prevent &+l+t (etc.) to turn into a carrot, the ampersand code is &+amp;+lt or gt. Please don't send me further down this rabbithole. I don't want to learn how to display that one without the plus signs.
      </p>
      <p>If it appears that some of my CSS code matches that of the example, it is that I am following along with the code as to learn what all of it means and how it works. I'll set most of the copied values the same but I like to adjust them to learn more
        about the associated properties. I definitely did all of the HTML by myself and half of the CSS alone. Once I got stumped, however, I looked at the example's code. I was trying to use flex boxes to make the nav bar, but it turns out that just
        using absolute/relative position with margin, padding, top, left, etc. works better.</p>
    </article>
  </section>

  <section class="main-section" id="Present_Day">
    <header>
      Present Day
    </header>
    <article>
      <p>
        final paragraph
      </p>
      <p>On top of that, I am also: <br>
        <ul>
          <li>lifting weights</li>
          <li>walking and jogging two miles daily</li>
          <li>playing guitar</li>
          <li>learning to code</li>
          <li>making weekly videos documenting my journey</li>
          <li>blank</li>
          <br> and
          <br>
          <li>blank</li>
          <br> I'm hoping to get back to my social life as well.
        </ul>
        I've gone a long way already but I have much longer to go.
        <br> Thanks for reading! :)
      </p>
    </article>
  </section>
</main>

I am still new to all of this and honestly don't know where the issue would be so I pasted the whole css code, except for my font import.

Answer 1

You had an additional } on the (max-width: 400px) breakpoint that was overriding a previous margin-left rule with margin-left: -10px

html,
body {
  min-width: 290px;
  color: hsla(214, 100%, 39%, 1);
  font-family: "Germania One", Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.25;
  background-color: hsla(239, 60%, 40%, 0.49);
}

h1 {
  color: black;
}

code {
  background-color: hsla(179, 8%, 40%, 0.49);
  border-radius: 3px;
  color: white;
  display: block;
  text-align: left;
  white-space: pre;
  position: relative;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  padding: 10px;
  margin: 15px;
}

#navbar {
  z-index: 1;
  position: fixed;
  background-color: hsla(246, 81%, 24%, 1);
  min-width: 290px;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 100%;
  border-right: solid;
  border-color: hsla(264, 80%, 39%, 1);
}

header {
  color: white;
  font-size: 30px;
  margin: 10px;
  text-align: center;
  font-size: 1.8em;
  font-weight: thin;
}

#navbar a {
  color: white;
  text-decoration: none;
  cursor: pointer;
}

#navbar ul {
  list-style: none;
  height: 88%;
  overflow-y: auto;
  overflow-x: hidden;
}

#navbar li {
  border: 1px solid;
  border-bottom-width: 0px;
  padding: 8px;
  padding-left: 45px;
  position: relative;
  left: -50px;
  width: 100%;
}

#main-doc {
  position: absolute;
  margin-left: 310px;
  padding: 20px;
  margin-bottom: 110px;
}

#main-doc header {
  text-align: left;
  margin: 0px;
}

section article {
  margin: 15px;
  font-size: 0.96em;
}

section li {
  margin: 10px 0px 0px 10px;
}

#Boulder-img {
  width: 80%;
}

#Sherpas-img {
  width: 90%;
}

@media only screen and (max-width: 815px) {
  /* For mobile phones: */
  #navbar ul {
    border: 1px solid;
    height: 207px;
  }
  code {
    overflow-x: scroll;
  }
  #navbar {
    position: absolute;
    top: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    max-height: 275px;
    border: none;
    z-index: 1;
    border-bottom: 2px solid;
  }
  #main-doc {
    position: relative;
    margin-left: 0px;
    margin-top: 270px;
  }
  #main-doc section {
    color: black;
    /*     padding-top: 240px; */
  }
}

@media only screen and (max-width: 400px) {
  #navbar {
    font-size: .75em;
  }
  #navbar ul {
    height: 222px;
  }
 /* } You had this closing bracket here*/
  #main-doc {
    margin-left: -10px;
  }
  code {
    margin-left: -20px;
    width: 100%;
    padding: 15px;
    padding-left: 10px;
    padding-right: 45px;
    min-width: 233px;
  }
}

<nav id="navbar">
  <header>
    FCC Technical Documentation</header>
  <ul>
    <li><a href="#Explanation" class="nav-link">Explanation</a></li>
    <li><a href="#Early_Life" class="nav-link">Early Life</a></li>
    <li><a href="#First_Move" class="nav-link">First Move</a></li>
    <li><a href="#Some_Technical_Documentation" class="nav-link">Some Technical Documentation</a></li>
    <li><a href="#Present_Day" class="nav-link">Present Day</a></li>
  </ul>
</nav>

<main id="main-doc">
  <section class="main-section" id="Explanation">
    <header>
      Explanation
    </header>
    <article>
      <p>
        Introduction paragraph
        <br>
        <code>
        &ltcode&gt
        <u>insert example code here</u>
        &lt/code&gt
      </code>
        <br>
        <p>It looks like I will have to do 5 of these code elements in the project. In order to display the symbol "&lt", I have to type
          <br>
          <code>
          &+l+t
        </code>
          <br> using those characters above without the plus signs. "&gt" is made by using the following in the same way:
          <br>
          <code>
          &+g+t
        </code>
          <br> I don't know how to display those characters together without it automatically displaying as those carrot symbols. I will ask on StackOverFlow (coding website/forum).
        </p>
        <p>
          I could do a documentation page describing what I already know and will use to make this page but I can't be bothered :p.
        </p>
        <p>
          So I posted my question on StackOverFlow, perhaps I will update in this section (sorry if it is long) if I get an answer. I've gotten the idea to use the code elements to do small features within the page to explain how I made certain parts of it. I also
          read through the prompt completely (glanced over it), and it seems that that was the only road bump. Thanks and enjoy.
          <br>:)
        </p>
    </article>
  </section>

  <section class="main-section" id="Early_Life">
    <header>
      Early Life
    </header>
    <article>
      <p>
        Early life paragraph

      </p>
      <h1>first photo header</h1>
      <img src="" alt="" id="">
      <p>
        <h1>header for story</h1>
        story paragraph
      </p>
      <img src="" alt="" id="">
      <p>To code in the photos above, I used the img element. The coding goes as follows:
        <br>
        <code>
      &ltimg src="linkofimagegoeshere" alt="descriptionincasephotofails" id="goodtohaveidtoalterappearancewithCSS"&gt
    </code>
      </p>
    </article>
  </section>

  <section class="main-section" id="First_Move">
    <header>
      First Move</header>
    <article>
      <p>
        first move paragraph
      </p>
      <p>
        I later moved to a small town in blank for high school
      </p>
    </article>
  </section>

  <section class="main-section" id="Some_Technical_Documentation">
    <header>
      Some Technical Documentation
    </header>
    <article>
      <p>
        So it turns out that you can display the code of how to code in a carrot symbol inside of a coding element without having what you type turn into a carrot itself. Sorry if that made no sense, this is hard to describe unless it is seen visually. Here is
        the code that you can enter in order to show &+l+t and &+g+t without them turning into carrots (basically ampersand has it's own sort of reference code).
        <br>
        <code>
        &amp;ltcode&amp;gt turns into &ltcode&gt
      </code>
        <br> In order to prevent &+l+t (etc.) to turn into a carrot, the ampersand code is &+amp;+lt or gt. Please don't send me further down this rabbithole. I don't want to learn how to display that one without the plus signs.
      </p>
      <p>If it appears that some of my CSS code matches that of the example, it is that I am following along with the code as to learn what all of it means and how it works. I'll set most of the copied values the same but I like to adjust them to learn more
        about the associated properties. I definitely did all of the HTML by myself and half of the CSS alone. Once I got stumped, however, I looked at the example's code. I was trying to use flex boxes to make the nav bar, but it turns out that just
        using absolute/relative position with margin, padding, top, left, etc. works better.</p>
    </article>
  </section>

  <section class="main-section" id="Present_Day">
    <header>
      Present Day
    </header>
    <article>
      <p>
        final paragraph
      </p>
      <p>On top of that, I am also: <br>
        <ul>
          <li>lifting weights</li>
          <li>walking and jogging two miles daily</li>
          <li>playing guitar</li>
          <li>learning to code</li>
          <li>making weekly videos documenting my journey</li>
          <li>blank</li>
          <br> and
          <br>
          <li>blank</li>
          <br> I'm hoping to get back to my social life as well.
        </ul>
        I've gone a long way already but I have much longer to go.
        <br> Thanks for reading! :)
      </p>
    </article>
  </section>
</main>