You have two block-level elements inside the header (logo div and nav). They each take up 100% of the width so they can’t share the horizontal space. The nav is below the header you just can’t see it because of the white text color on the links. Personally, I would suggest not using floats for this layout, look into flexbox.
Anyway, you can float the .logo div to the left. Or you can set the .logo div to be inline-block and float the nav to the right. Both will cause issues at smaller screen sizes.
I’d suggest setting the header to display: flex and also give it align-items: center then use margin-left: auto on the nav. https://codepen.io/anon/pen/XLpjMj
Was about to say literally the same thing as @lasjorg use flexbox on your <‘header’> element and adjust the margin between your logo and your ‘’ afterwards.