After i cilck the nagivate link my page messed up

I am doing the “Technical Documentation Page” and i get all passed.

I want to go more a bit. I find out if i cilck any of the navigation link my page will messed up.

here is the my codepen https://codepen.io/johndleejianxing/pen/BaJwxgw?editors=1100

First thing I notice, this part needs to be changed:

.main-section
{
   position: absolute;
   left: 300px;  
}

Because all of your main-sections are placed on the same place (like a layering effect), making the text very difficult to read. Therefore you should not use “position: absolute;” here in my mind. But if you simply remove it, this will make your text end up under the navbar, so you need to adjust how these (the main sections and the navbar) interact.

1 Like

Okay, i will try fixing . Thanks SwedishErik

@leexing So, if you remove that additional .main-section (the small one) that looked like this:

.main-section
{
   position: absolute;
   left: 300px;  
}

And add: #main-doc {margin-left: 300px;} I think it should work better for you.
You can check this page, for an interactive examples with something similar to what you might be looking for: Tryit Editor v3.7 (w3schools.com). Let me know if that makes it work for you.

1 Like

The css you giving me is work! But not in #main-doc. I not sure why #main-doc is not working.

but I create a div with a class covering all my “main-section” and close it put in the css you giving me it work! Thank you SwedishErik