Can't get rid of gap in navigation bar

Hello, I am working on my tribute page: https://codepen.io/michaelnicol/pen/KKmgZxZ

As you can see, I put a navigation bar on the top of the page.

The outer red sqaure is the nav in the html, while the ul with all of the nav-pills is the second inner red box.

I am wondering why my ul is not taking up 100% height of the nav?

I am also confused on why the flexbox is not allowing me to align the nav-pills by themselves

When I add flex: 3; to my .nav-pills, their is a gap between the edge of the ul and the #name. How do I remove this? Even without flex (grow) it also does this.

Most browser’s put a top/bottom margin around lists by default. Try setting the margin for the <ul> to 0.

justify-self only works with grid, not flex; What exactly are you trying to do here?

Similar to the default margins, most browsers use a default left padding on lists. Try setting the padding for <ul> to 0.

1 Like

Thank you, I was able to fix the margins.

My idea was to align my name to the far left, and the rest of the content to the right of the navigation bar.

The text I have for the navigation is mostly placeholder. I was thinking of replacing some of the text with logos instead.

Take a look at the flex-grow property, that might help you do what you want. CSS Tricks has some of the best flex documentation on the web.

1 Like

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