Technical Documentation Page - Build a Technical Documentation Page

Curriculum Help
,
1

Can you help me to solve this. I dont know whats wrong.
Your #navbar should always be on the left edge of the window.

Your code so far

/* Global styles */
body {
  background-color: #FAE8E0;
  margin: 20px;
  padding: 10px;
  font-family: Arial, sans-serif;
}

/* Header styles */
header {
  background-color: #EF7C8E;
  color: #fff;
  padding: 10px;
  text-align: center;
}

/* Navbar styles */
#navbar {
  background-color: #F2E6D6;
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  padding: 20px;
}

#navbar ul {
  list-style: none;
  padding: 0px;
  margin: 0;
}

#navbar li {
  margin-bottom: 10px;
}

.nav-link {
  color: #333;
  text-decoration: none;
}

.nav-link:hover {
  text-decoration: underline;
}

/* Main content styles */
#main-doc {
  margin-left: 220px;
  padding: 20px;
}

.main-section {
  margin-bottom: 30px;
}

/* Media query for responsive layout */
@media (max-width: 768px) {
  #navbar {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
  }
  
  #main-doc {
    margin-left: 0;
  }
}

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

Can you give us your HTML too?

3

Please post your HTML as well, without it, it’s hard to test your code.

I didn’t look at how the position is calculated but I’m guessing if you use position: absolute in the media query it might work. You will have to manually push the main content down.