1 I agree that px isn't ideal, and hence when changing to % I noticed the problem of the unwanted spacing.
2 I'm familiar with resets, and the default code appears to have an appropriate one.
3 Having thought about this more, I think it's behaving as it should...
Clearly, when the browser is narrowed the two items will move closer until their width is too great to display adjacent and so one will be displaced downward.
Increasing the font-size makes this happen sooner (at wider browser width), and so the nav will 'slide' under the logo as the browser is further narrowed - at least as long until the media query 'flips' the nav to the alternate (vertically stacked) display.
Increasing the max-width in the media query will hasten the point at which the nav 'flips', and so by setting that value sufficiently high - so that the combined width of the logo and nav will never be great enough to cause the displacement - the issue won't arise.
So the 'solution' (to what really isn't a problem) is to tweak that max-width according to the font-size and number of items in nav.
My initial thought that increasing the font-size triggered the issue is wrong - simply adding more items to the nav will do the same thing.
Clearly, I am an idiot and shall now try to stick to stuff I know.