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
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
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.
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.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.