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.
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.
body has a margin according to the inspector.
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
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: W3Schools Tryit Editor
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;
}
line-height
to adjust the position of nav-link
text