Improving my navbar

Improving my navbar
0

#1

Can anyone offer tips on improving my horizontal navbar in the link below?

I’m trying to make my navbar stretch across the entire width of the screen AND be placed at the very top (with no blank space above it). In the CSS, I set the width:100% for the

    with id=“nav-bar”. But there still appears to be some space on top.

    I have yet to try much styling but will do so once I get the spacing sorted out.


#2

By default the <html> and <body> tags have some predefined padding and margin. In order to remove that you’ve to set margin and padding to 0px in you css as follows:

html, body {
margin: 0;
padding: 0;
}

You can also refer to both tags by using * operator instead, Should always include this in beginning of your css file.


#3

Use flexbox to align your nav items… add display: flex in your #nav-bar

You can see the difference

Adding to what @nischaldutt said initially in your "*" gives a meaning to all with margin and padding to 0 you should add box-sizing: border-box



#4

That makes sense! Thank you nischaldutt!


#5

Thank you for the feedback Sujith3021! I haven’t used much flexbox yet, but I was thinking about using it for my navbar because it seemed like it would be simpler. I will try it now per your recommendation! And those CSS-Tricks articles are great. Thank you for sharing!


#6

Thank you for the help on my project. I read both of the css tricks articles - thank you for sharing them. Going to read more about opening and closing tags and elements - i think I need to work on it more

Sean