My navbar is becoming a Diva.. Please help!

Season greeting peoples. Please bring some joy to my holidays with a little help. Basically I am running into an issue where my navbar thinks it better than the band. Once I “fixed” the position it overlays right over the main content. Please help me before I start stomping gingerbread houses. My code is below. P.S. sorry if I code messy. I’ll take pointers there too.

Your code so far
HTML

        <h4 id="disclaimer">
  ---All this information comes directly from gamespot.com and will only be used for training purposes only. Please don't sue me. My ex wife struck first.--- 
</h4>
<div id="container">
<ul id="navbar">
<b> How to build a gaming PC </b>

  <li class="navlink"><a href="#motherboard">
  Step 1: Prep the Motherboard
    </a></li>
  <li class="navlink">
    <a href="#CPU">
    Step 2: Install the CPU
    </a>
  </li>
<li class="navlink">
  <a href="#SSD">
    Step 3: Install the M.2 SSD(s)
  </a>
  </li>
<li class="navlink">
  <a href="#RAM">
    Step 4: Install the RAM
  </a>
  </li>
  <li class="navlink">
  <a href="#case">
    Step 5: Getting your case ready for your motherboard
    </a>
  </li>
  <li class="navlink">
  <a href= "#install_motherboard_into_case">
    Step 6: Install your motherboard into your case
    </a>
  </li>
  <li class="navlink">
  <a href="#PSU">
    Step 7: Install your power supply (PSU)
    </a>
  </li>
</ul>
<main id="main-doc">
<h1>
  <b> How to build a gaming PC </b>
  <br>
  </h1>
  <section class="main-section">
  <h3 id="motherboard"> 
  Step 1: prepare The Motherboard
  </h3>
  <p>
 Assembling the motherboard outside of the case will make your whole experience much easier to deal with. Our general rule of thumb is to install as many parts as possible before screwing it into your case. An important thing to note before starting on your motherboard is that you should refer to its manual as often as possible, as your specific motherboard may suggest specific ways or places to install your components. Also, keep in mind that certain parts will require some force when plugging them in, while others simply just need to be placed into their respective spots. <code>Please pay close attention</code> to the following instructions before installing your components.
  </p>
    <p>
      The first thing you'll want to do is make sure you're assembling your PC on a flat surface. <code> Don't build</code> it on a carpet--the mixture of static electricity and your PC's parts is a dangerous combination and could cause damage to your components. It's unlikely to happen, but we still suggest touching your metal case from time to time to help ground yourself and avoid this from happening.
    </p>
    <p>
    Instead, build your rig in a room with hardwood or laminate floors like a dining room or kitchen--we even went the extra mile and took our socks off. Take your motherboard out of its packaging and then place it on a flat surface. You can lay it directly on your table, but we personally placed it on top of its box to avoid scratching our desk. At this point, you're ready to start.
    </p>
  <p>
      Here is a list of motherboard I've found:
    </p>
<ul>
  <li> ASRock B450M PRO4 AM4 AMD Promontory B450 SATA 6Gb/s Micro ATX AMD Motherboard </li>
    <li>
     MSI B550 GAMING PLUS (Socket AM4) USB-C Gen 2 AMD ATX GAMING Motherboard PCIE Gen4  
  </li>
  <li>
    Thermaltake Core P8 Tempered Glass Computer Case
  </li>
  <li>
    ASUS Intel LGA-1151 mATX Motherboard DDR4 2666MHz, SATA 6Gbps
  </li>
  <li>
    GIGABYTE B450M DS3H V2 (AMD Ryzen AM4/Micro ATX/M.2/HMDI/DVI/USB 3.1/DDR4/Motherboard)
  </li>
    </ul>
  </section>
  <section class="main-section">
    <h3 id="CPU">
    Step 2: Install the CPU
    </h3>
  <p>
    The easiest part of your entire build is also the first: installing our AMD Ryzen CPU. Your motherboard's CPU socket will be protected by a piece of plastic, which you'll be able to remove when you open the tray. All you need to do is gently push down on the tray's metal arm and pull it out. Once it's free of the tray, lift it up to open the socket and the protective plastic will fall out. Be sure to keep this plastic piece in case of any issues with your motherboard, as you'll need to reinsert it before sending it back to the manufacturer.
    </p>
    <p>
    At this point, your CPU socket tray should be open, allowing you to install your CPU on to your motherboard. Your CPU should have some small half-circle indents in its board. The CPU socket is designed to fill these indents, making it easy to line up your CPU and install it properly. Once you've figured out how to place your CPU into its socket, do so gently. Do not apply pressure directly on the CPU--simply close the tray and make sure the metal arm is locked into its original position, which may require a bit of force.
    </p>
  <p><a href="#disclaimer">
    <center> back to top </center></a></p>
  </section>
<section class="main-section">
  <h3 id= "SSD">
  Step 3: Install the M.2 SSD(s)
  </h3>
  <p>
    M.2 SSDs are another easy step in the process, but <code>don't forget</code> to reference your manual to find out which M.2 slots you should use first. Your motherboard may have protective thermal guards on your M.2 slots, so remove those first. Once you've taken any guards off the motherboard, you can slot in your M.2 SSDs. These require a little bit of force to slot into their respective slots, but don't push too hard--they should slide in quite easily. Once the M.2 SSDs are in their slots, the opposite end should be pointing upward at a diagonal angle. At this point, you take the respective screw (that is often included with your motherboard), push each M.2 SSD down, and screw them into the appropriate spots. At this point, you can take the thermal guard and place it on top of each M.2 SSD, screwing it back into place.
  </p>
  <p><a href="#disclaimer">
    <center> back to top </center></a></p>
  </section>
  <section class="main-section">
  <h3 id="RAM">
    Step 4: Install the RAM
    </h3>
    <p>
       This is another step where you'll want to reference your motherboard's manual, which should be able to tell you which order to place the RAM in. If you have four slots and only two sticks of RAM, then you should make sure the two sticks are spaced apart in either the first and third slot or second and fourth--your motherboard manual can advise you here. Placing your RAM apart like this will help you get the most out of your CPU. First off, be sure to flip down the plastic clips on both sides of each slot you plan on using. Inserting the RAM requires more force, but make sure you start small and then ramp up your pressure gradually. When you hear a click, your RAM is in its slot. This should cause the plastic clips to flip up, gripping your RAM. If you notice your clips haven't flipped up, then your RAM may not be seated 
    </p>
  <p><a href="#disclaimer">
    <center> back to top </center></a></p>
  </section>
  <section class="main-section">
    <h3 id="case">
   Step 5: Getting your case ready for your motherboard
    </h3>
    <p>
      It's almost time to throw your motherboard into your case, but first you'll need to screw in some standoff screws that you'll place your motherboard onto before screwing it in. These standoffs will come with your motherboard, and once you've located them, you can start screwing them into your case. There should be about a dozen holes for the standoffs to fit into. Refer to your case's manual if you're having trouble finding them. Once the standoffs are screwed in, you're ready to insert your motherboard.
    </p>
  <p><a href="#disclaimer">
    <center> back to top </center></a></p>
  </section>
  <section class="main-section">
 <h3 id= "install_motherboard_into_case"> Step 6: Install your motherboard into your case
    </h3>
    <p>
      The standoffs make it easy to place your motherboard into your case, but <code>don't start screwing it in straight away.</code> There should be a space on the back of your case for your motherboard's I/O ports to fit into. It'll be a rectangle, and you'll want your motherboard to be inserted comfortably into this space so that you can access all of the ports. Once everything fits, you can start screwing your motherboard onto the standoffs with the appropriate screws. <code>Don't forget</code> that you don't want to screw anything too tightly. Just turn your screwdriver until everything is securely tightened, and then you're ready to move on.
    </p>
  <p><a href="#disclaimer">
    <center> back to top </center></a></p> 
  </section>
  <section class="main-section">
  <h3 id="PSU">
    Step 7: Install your power supply (PSU)
    </h3>
    <p>
    Installing the power supply into your case is often quite easy. You'll want to refer to your specific case's manual for this, but it's pretty straightforward. First, we took our case's mounting bracket and screwed it onto the back of our power supply. You'll notice your power supply also sports a fan, which is used to circulate air. If you're planning on placing your finished gaming PC on a hardwood floor or desk, then feel free to aim this fan downward; if you're placing your gaming PC on a carpeted floor, then you'll want to aim the fan upward.
    </p>
    <p>
    Once you've figured out which way your PSU needs to be oriented, and screwed on the mounting bracket, you can easily slide it into your case and tighten the bracket's screws. Depending on how much room you have for your PSU, you may want to hold off on screwing it in until you've plugged in all of its various power cables.
    </p>
  <p><a href="#disclaimer">
    <center> back to top </center></a></p>
  </section>
</main>
</div>

CSS

#disclaimer{
  background-color: red;
  font-size: 10px;
  text-align: center;
  width:100%;
}
code{
  background-color: lightgrey;
}
#navbar{
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
  border: 1px solid #555;
  width: 22%;
  height: 100%;
  position: fixed;
  
  
  
}
.navlink{
   display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
  text-align: left;
  overflow: hidden;
  
  
}
.navlink a {
  display: block;
  width: 100px;
}
.navlink a:hover {
  background-color: #555;
  color: white;
}
h1{
  text-align: center;
}
#main-doc{
  background-color:#fffdd0;
  width: 100%;
 float: right;
}
#intro{
  text-align: right;
}
#container{
  display: flex
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 13505.63.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36.

Challenge: Build a Technical Documentation Page

Link to the challenge:

Hello there,

Would you mind including a link to your project? It is much easier to help, when we can see and experiment with what you are seeing.

Also, 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 (’).

Sorry about that. Here’s the link:

https://codepen.io/donald-hart/pen/dypNQpw

I think you are missing nav element user story 8.since you need to follow user stories

Thanks for that.

The easiest fix is messing with the margin-left property of your #main-doc element. Hint: Figure out the width of the navbar and do the opposite

Otherwise, it might be beneficial to start by completely separating the nav and the body content from one another.

Hope this helps

That is how position: fixed works. Just like position: absolute it takes the element out of the normal document flow. This means the element no longer will interact with other elements on the page (which is why it is not pushing the main element).



You have already given the elements some width which is almost everything you need, you really just need some left margin on the main element. Here is what I might do.

  1. Set box-sizing to border-box at the top of the CSS to help make sizing elements easier. And remove the default margin on the body.
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}
  1. Set the width on the nav. You can use either a fixed pixel value or a percentage. Set the width on main and use left auto margin. Here I show how you can use a fixed value on nav and then use the calc() function for the width on main.
#navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  /* fixed pixel value */
  width: 250px;
  background-color: #f1f1f1;
  border: 1px solid #555;
  height: 100%;
  position: fixed;
}

#main-doc {
  background-color: #fffdd0;
  /* 100% of the full width minus the width of the nav element */
  width: calc(100% - 250px);
  /* left auto margin */
  margin-left: auto;
  /* some padding for the main element, just because */
  padding: 2rem;
}

Example code

Thanks for the good info. I only have the navbar and the main attached by a container; however, adjusting the margin seems to have done the trick for the most part. I feel like a bone head now. Thanks alot.