You can make both elements align to the top by changing
.header
:
.header {
...
display: flex;
align-items: start;
}
nav {
...
flex-grow: 1;
}
If you want the nav to align to the middle of the logo, but both to remain at the top of the page, then you'll need to wrap the logo and nav inside another element, since the
.header
is set to take the full height of the window.