Technical Documentation Page - Build a Technical Documentation Page

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/ Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

Can you give us your HTML too?

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.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.