White color in top left of my navigation bar. CSS PROBLEM

White color in top left of my navigation bar. CSS PROBLEM
0

#1

I am working on my product landing page project and I don’t know why there is still a white color left in the top left on the navigation bar. Here is my codepen:

Please help me.


#2

body has a margin according to the inspector.


#3

Its because you have not positioned your <header> at the extreme left, just like you did for the top.
Add this to your headerleft:0; this should fix it.

Also, you are missing left " of your logo image


#4

Thanks for the help.

One last question. When I hover on the

 Pricing
Features
How It Works

the background-color only changed around its container. How can I make it so that, the background-color also fills the height of Pricing, Features and How It Works . Just like in this example: https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black


#5

I think the best way to get an idea of the position/width/ height of your elements is by using border and separate background-color. You can visualize your element better and it would help in adding the right margin and padding. I would advise you to do the same. By looking at your code I would suggest the following.

  • remove margin-top from nav-bar and for the nav-link remove top/bottom padding and add left/right padding as desired by you separately. By removing this extra margin and padding you can now set the height of nav-link equal to the height of your header (in your vase that is 80px).

  • You would also need to remove the extra margin added because of ul, so set:

#nav-bar ul {
  margin:0;
}
  • Other than that you can change line-height to adjust the position of nav-link text