Nav list items are higher on the page, and also stack up slightly upon resizing the window just after the break point!?

So i noticed that after i added the new code to the header, it appears higher on the page than it does on Nicks example. Plus when i resize the page there is a certain point just after the break point where the nav list items stack up and 'contact' appears below 'about'. It's not a firefox issue (which is what i use), as i opened it in explorer too and it does the same thing. My code is exactly the same as Nick's, and i even deleted the code and restarted the video and the same thing happened. Its totally fine and everything looks the same as Nick's right up until I add the 'nav' code: nav { background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; }

I have screenshots of what it does but don't know if i can add them here.

to be clear, it looks fine and works great in small format, but just after it breaks to a larger format the nav text stacks up, and is too high on the page. then after the window is made a fraction larger it fixes the stacking issue, but the text is still to high.

I had thought that the 'inline-block' previously written in main.css would prevent the nav text from stacking when the size is reduced.. or am I missing something?

would appreciate any thoughts or input, or if you need more information, details or certain code to look at just ask..

Thanks in advance!