I would argue that's not the layout going wrong, but actually doing what's intended with the current setup and available space. You've floated the logo left, but the container (header) is an inline-block element that will wrap when there's overflow.

The linked solution's top answer is fairly outdated in my opinion, and the second answer is a more modern approach: https://stackoverflow.com/a/22218694/2440595.

Setting the container to be flex and disabling wrapping will achieve what I think you're going for, but be aware it may cause other issues if you aren't adding flexibility to the logo or logo-text at smaller sizes/larger zooms.