This technique will also preserve the order of your menu items. Whereas if you’d just floated some menu items to the right, the order of the right aligned items (if there were more than one) would now be wrong.

Of course, this technique doesn’t just apply to menus but it seems to be the most common case I find for it out in the wild.

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”RpBwmE” default_tab=”html,result” user=”nickdavis”]See the Pen <a href=’https://codepen.io/nickdavis/pen/RpBwmE/’>Right and left aligned menu items in a single container</a> by Nick (<a href=’http://codepen.io/nickdavis’>@nickdavis</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Update (25 Mar 2017): Alain Schlesser (rightly) points out that this needs formatting for mobile. I should clarify that the above is only a proof of concept for a desktop view and I would re-format the layout for smaller screens (e.g. all centred, in a dropdown menu perhaps).

In fact one of the bonuses of doing things this way is that you haven’t to create two different menus or extra containers within the menu to format things. So when it comes to mobile formatting you’ll hopefully have an easier time.