There's a strange issue that I'm facing, only in Chrome. It seems to be adding some extra space on top of an element with float: right, but only when the browser window is resized (you can see how the name then shifts under the header):
This problem only occurs when I resize back to the desktop media query.
Here is how my HTML looks:
<header role="banner">
<a class = "logo"...>...</a> <!-- inline-block -->
<div class = "client">...</div> <!-- float: right -->
<nav role = "navigation">...</nav> <!-- display: inline-block -->
</header>
You can see the name "Michael" appearing correctly to the right in the main navigation. But as soon as the browser is resized, it ends up at the bottom.
Any suggestions on what could be causing this and how I might go about fixing it? I have double-checked that this issue persists across the latest versions of Chrome on both Windows and Mac.