Hi!
I’m trying to make my header cover the top of the page and align the nav.items next to eachother.
As you see now, the header is “short” and the nav.items/links, next to the title and logo are stacked:
I tried to play with the flex-direction but couldn’t manage to change the look.
Can anyone see what I’m missing here?
You can give the header width: 100%. As for the links, only the direct children of the flexbox container are flex items. In your case for the #nav-bar that is just the <ul> element and not the <li>s inside it. You can make the <ul> a flex container.
Another question. I am trying to push the nav bar to the main-end. I tried using justify-content: space-between and also space-around but can’t make it work.
Also the page looks very different in Full-page view , I guess its because I haven’t used any media queries yet?
You want the nav links on the right side?
You can use justify-content: flex-end or align-items: flex-end depending on the flex-direction.
If you do it on the nav you have to use align-items: flex-end or remove flex-direction: column from it and use justify-content: flex-end. If you do it on the ul you can use justify-content: flex-end; but you will need to make it full width.