Flex Navbar Loses Centering - css

Question

Pen here.
HTML
<header>
<div id="logo-div">
MyLogo
</div>
<nav>
<ul class="nav-list">
<li class="item">LINK #1</li>
<li class="item">LINK #2</li>
<li class="item">LINK #3</li>
<li class="item">LINK #4</li>
<li class="item">LINK #5</li>
</ul>
</nav>
</header>
CSS
header{
display: inline-block;
width: 90%;
}
#logo-div{
margin-right: 50px;
float: left;
font-size: 28px;
color: red;
font-weight: 800;
line-height: 60px;
}
nav{
float: right;
}
.nav-list{
display: flex;
height: 150px;
width: auto;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: flex-start;
align-content: flex-start;
margin: 0%;
padding: 0%;
width: auto;
list-style-type: none;
}
.item{
background-color: #d6315d;
height: 50px;
width: 150px;
margin: 5px;
text-align: center;
line-height: 45px;
font-weight: 600;
}
Typical website header with inline-block display, logo div on left and navbar on right.
I need to have flex-wrapping navbar to accommodate various device widths, at least until screen-width = 600px where it can be changed to a hamburger. So I make the nav-list height 3 times the height of the list item.
Problem is that if I float the nav block to the right within the header, the nav item-list will only wrap UNDER the logo-div, not beside it.
I can solve this by removing the float from the nav block altogether. But now the nav block drifts to the left on zoom, so the whole page looks off-center.
Anyone got any ideas ?
EDIT
This CodePen achieves the desired effect of stacking nav items on rows within a navbar without the navbar spilling below the logo - at least till screen widths go below ~ 400px.

Answer 1

If I understand correctly you are having an issue with the items not being aligned when the screen is smaller. The best way to do this is using display: flex to get alignment done easily. I have done a sample code and hope it helps your problem (align-items-center aligns all items including your logo to the center in the row when the screen size changes. If you don't need it you can remove it)
HTML
<header>
<div class="d-flex flex-row align-items-center">
<div class="logo">
MyLogo
</div>
<nav>
<ul class="nav-list">
<li class="item">LINK #1</li>
<li class="item">LINK #2</li>
<li class="item">LINK #3</li>
<li class="item">LINK #4</li>
<li class="item">LINK #5</li>
</ul>
</nav>
</div>
</header>
CSS
.nav-list {
display: flex;
width: auto;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
margin: 0%;
padding: 0%;
list-style-type: none;
}
.item {
background-color: #d6315d;
height: 50px;
width: 150px;
margin: 5px;
text-align: center;
line-height: 45px;
font-weight: 600;
}
.d-flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.align-items-center {
align-items: center;
}
.logo {
margin-right: 50px;
font-size: 28px;
color: red;
font-weight: 800;
}
JS Fiddle Link: https://jsfiddle.net/SJ_KIllshot/7u36m194/