Technical documentation page/Navbar help

I am working on the technical documentation page and am having trouble styling the navbar. I currently have it position fixed and located top and left zero, but it’s covering content. I can change the margin on the body so that it works, but then it doesn’t pass the test. Can anyone point me in the right direction to fix this?

Here’s the CSS I have and a screenshot.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');


@media (max-width: 1250px) body{
  width:100%;
}

.mainnav{
  display:flex;
  position:fixed;
  top:0px;
  left:0px;
  
}

li{
  list-style:none;
  
}

a{
  text-decoration:none;
  cursor:pointer;
  color:black;
  display:block;
  width:200px;
  height:60px;
  font-size:26px;
  background-color:lightgrey;
  
}
a:hover{
  color:#037A36;
  transition:0.3s;
}

body{}

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

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