Build a Technical Documentation Page (challenge)

Tell us what’s happening:
Im having trouble with the technical documentation challenge.

#Layout

  • 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.

this is the message written to me. can anyone help me out?

Your code so far

Your browser information:

Link to the challenge:

/*=== GLOBAL ===*/
* {
  margin: 0;
  padding: 0;
}

body {
  font-size: 16px;
  font-family: 'sarabun';
  color: #343434;
}

h3 {
  margin: 10px 0;
}

header {
  color: #000;
  font-size: 24px;
  text-transform: uppercase;
  margin: 10px 0;
}

#main-doc {
  margin-left: 220px;
  padding: 15px;
}

p {
  line-height: 1.5em;
}

img {
  width: 100%;
  margin: 5px 0; 
}

@media screen and (min-width: 760px) {
  img {
  width: 75%;
  margin: 10px; 
  }
  
  .center {
    text-align: center;
  }
}

ol {
  list-style-type: none;
  line-height: 1.7em;
}

ul {
  list-style-type: none;
  line-height: 1.7em;
}

.pink {
  color: #FF1E78;
}

.green {
  color: #0FD62D;
}

.blue {
  color: #1B22FF;
}

.grey {
  background-color: #d9d9d9;
  padding: 10px;
  border-left: solid 3px #777;
}

.red {
  color: #FF0000;
}
/*=== NAVIGATION ===*/

#navbar {
  width: 200px;
  height: 100%;
  position: fixed;
  padding: 10px;
  top: 0;
  left: 0;
  background-color: #B7D7D8;
  z-index: 1;
  overflow-y: scroll;
}

ul li {
  padding: 10px;
}

a {
  text-decoration: none;
  font-size: 18px;
}

a:link {
  color: #343434;
}

a:visited {
  color: red;
}

a:hover {
  color: blue;
}

a:active {
  color: purple;
}

@media screen and (max-width: 815px) {
  #navbar {
  width: 100%;
  height: 150px;
  position: fixed;
  padding: 10px;
  top: 0;
  background-color: #B7D7D8;
  z-index: 1;
  overflow-y: scroll;
  }
}

/*=== Intro HTML ===*/

#note {
  background-color: #FF#navbar {
  width: 200px;
  height: 100%;
  position: fixed;
  padding: 10px;
  top: 0;
  left: 0;
  background-color: #B7D7D8;
  z-index: 1;
  overflow-y: scroll;
}DE7A;
  padding: 3px;
}

/*=== Anatomy_of_an_element ===*/

/*=== Attributes ===*/

#example {
  background-color: #FEEDFF;
  margin: 10px 0;
  border-left: solid 3px #F4B4FF;
}

/*=== Anatomy_of_a_HTML_Document ===*/
pre {
  background-color: #d9d9d9;
  border-left: solid 3px #11D90D;
  margin: 10px 0; 
}

/*=== Entity References ===*/

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 10px;
  margin: 10px;
}



i got it!! but thank you to everyone with the intention to help