Technical Documentation Page - Build a Technical Documentation Page

Curriculum Help
,
1

Tell us what’s happening:
I keep getting this error
“Your #navbar should always be on the left edge of the window.”
please what am i not doing right?

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

html, body{
  min-width: 300px;
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
  background-color: #ffffef;
}
header {
  color: black;
  margin: 0px;
  text-align: center;
  font-size: 28px;
  font-weight: bold;
}
#navbar{
  position: fixed;
  min-width: 300px;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 100%;
  border-right: solid;
  border-color: black;

}
#navbar ul{
  height: 100%;
  padding: 0;

}


#navbar li {
  color: #000000;
  border-top: 1px solid;
  border-bottom: 1px solid;
  list-style: none;
  width: 100%;
}
#navbar li:hover{
  background-color: #a43f1f;
}
#navbar a {
  display: block;
  padding: 10px 25px;
  color: #000000;
  text-decoration: none;
  cursor: pointer;
}

section article {
  color: #000000;
  margin: 16px;
  font-size: 16px;
}

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

#main-doc header{
  text-align: left;
  margin: 0px;
}
#main-doc {
  position: absolute;
  margin-left: 310px;
  padding: 20px;
  margin-bottom: 110px;
}
code {
  display: block;
  text-align: left;
  position: relative;
  line-height: 4;
  background-color: #191212;
  padding: 20px;
  margin: 15px;
  border-radius: 10px;
  color: aliceblue;
}

#Reference a:visited{
  color: #ff0000;
  
}
@media (max-width: 768px){
  #navbar ul {
    border: 1px solid;
    height: 275px;
  }

  #navbar {
    background-color: white;
    position: relative;
    top: 0;
    padding: 0;
    margin-bottom: 100px;
    width: 100%;
    max-height: 270px;
    border: none;
    z-index: 1;
  }

  #main-doc {
    position: relative;
    margin-left: 0px;
    margin-top: 80px;
  }
}

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

hi, is your navbar on the left?

We cannot tell from here because you have not shared all your code.

3

I fixed it, turns out that i put my navbar within my main element whereas it was supposed to be before it. Thanks for replying tho