Technical Documentation Page- Stuck! Need help

This is the error:
#1. On regular sized devices (laptops, desktops), the element with id=“navbar” should be shown on the left half of the screen. It should always be visible to the user and should remain stationary. You may need to enlarge the viewport or zoom out to ensure the navbar doesn’t scroll with the page content.

I’m clueless. Please haaalpp!

Here’s the link to my pen: Codepen

I found the problem:
The #navbar must be fixed to the left side on pc and laptops (width> 850x)

This is what I did:

1- I created a div with id = "container", there I put all the content, the navbar goes outside the #container.
It would look like this

<main>
 <nav>
 </nav>
 <div id = "container">
  <sections>
 </div>
</main>

2- Main in CSS must be:

# main-doc {
  display: flex;
  flex-direction: row;
}

flex-direction: row; so that nav is on the left and div on the right

full css code:

#main-doc {
  display: flex;
  flex-direction: row;
}
#container {
  margin-left: 180px;
}
#navbar {
  overflow: auto;
  border: 1px solid;
  width: 150px;
  height: calc(100vh - 20px);
  position: fixed;
}
#navbar li {
  list-style: none;
  display: inline-block;
}

@media only screen and (max-width: 815px) {
//
}

Another thing: Media queries always go to the end of the css, never to the beginning.

Sorry for the bad English.

Good luck! :grinning:

Heyy! Can you please have a look at my code and tell me what I’m supposed to do exactly?

Since I do not know what’s in your html I can’t figure out anything properly :frowning:

My HTML the same as yours. The only thing I did was add a div with id="container", there I put all the <section>, then <nav> moved it up. The structure of the html should look something like this:

<main>
 <nav>
  //nav content
 </nav>
 <div id="container">
  <section>
  <section>
  <section>
  ...
 </div>
</main>

Good luck! :smiley: