inline-block on span

float: left;

Try adding that to span.left

It will cause it to float to the left (as suggested by the syntax).

---

I am not a CSS expert by any means so please don't take this as unarguable fact but I find that when something is floated, it makes no difference to the vertical position of things below it.

If you float the span.right to the right then add text beneath them you should get some interesting results, to stop these "interesting results" you can use "clear: left/right/both" which will cause the block with the clear styling to be under anything floated to the left/right/both. W3Schools have a page on this property too.

And welcome to Stackoverflow.

This is because inline and inline-block include whitespace (in your case the line break) between the elements. In your case the combined width of the elements is 50%+50%+whitespace > 100%.

You should either put the two elements on the same row in your HTML document (without space)

<div class='header'>
    <span class='left'>Left Span 50% width</span><span class='right'>Right Span 50% width</span>
</div>

Or use HTML comments

<div class='header'>
        <span class='left'>Left Span 50% width</span><!--
     --><span class='right'>Right Span 50% width</span>
</div>

I myself prefer the latter.