I’ve been banging my head against the wall here with this nav-bar. I cannot for the life of me figure out why I can’t get the items to space out. I also cannot figure out when the media-query for the whole header doesn’t result in the links ‘wrapping’ when I shrink the screen.
There has to be something simple I’m missing here but I’ve really spent a lot of time thinking about this and parents/children and it’s just not clicking.
You could add some margin-left to the nav’s li elements to space them.
The wrapping is also working as expected. You can see the links going below the logo when you shrink the viewport.
it’s because you are setting the nav container as the flexbox rather than the ul container.
remember that display: flexbox only affects the direct children of the defined flex container.
in your current setup, with nav as the flex container, it has only one flex item, which is the unordered list.
once you set the flex container to the ul then you should be closer to what you are looking for. you can also remove setting flex-direction to row (which is the default) and setting inline-block on the li items. flex items are automatically adjusted to block items once a flex container is created.
NOTE: you may need to adjust the width of your nav container to get the desired effect
OH. I thought it was all children, not only direct children. Jesus Christ that makes so much sense. Thank you thank you!