Why does the last inline-block wrap even though there is enough space for it not to wrap?

Question

css

There is a code: codepen.io/sanns/pen/WQjRoj?editors=110)
I tried to make the menu itself on the right, and the elements to be moved along the left edge. I did so, but for some reason the last element is transferred, although there is enough space for it at high resolutions. Tell me, please, what's the matter? Thank you!

Answer 1

suggested on stackoverflow not to set margins as a percentage
codepen.io/sanns/pen/WQjRmM?editors=110

Answer 2

do this:

.navg {
    display: block;
    text-align: right;
}

Answer 3

Each browser adds padding to inline-block elements by default, the size of this padding varies depending on the browser.
To avoid this, the closing and opening tag of the element is left on the same horizontal tag, which is styled as an inline block (without a space).

<div class="inline-block-elem">
  text
</div><div class="inline-block-elem">
  text
</div>

Answer 4

Remove styles from .navg and everything will work. Here:
codepen.io/anon/pen/vNmgQG

Answer 5

Strange, I started formatting your html and the block aligned as it should, it feels like there are non-portable spaces (although they should have been visible in the editor)