A few years ago when Bootstrap was released everyone was centering their header-content. Nowadays, especially on "material" design websites, I see that header content is not centered even though the other parts are centered. Which one is better for UX? (I'm not talking about mobile or tablet, just desktop with enough space).

Just to give you an idea what I'm talking about;

Good old way

enter image description here

New way

enter image description here

  • "Which one is better for UX?" The clue is in the name, ask your users. Aug 2, 2017 at 21:15
  • To say that the header content is centered isn't really accurate. Header content is placed directly above main content, rather than being truly centered. There's a big difference-- truly centered content would distract from overall page layout and lead to additional UX problems, while header content that conforms to page margins aids in layout and in design responsiveness.
    – denveruxer
    Aug 2, 2017 at 22:09

1 Answer 1


The 'good old way' as you describe it is better for UX.

Consider that when you align your logo to the left and the menu to the right the rest of your site also shows this behaviour. Imagine you have a 4k widescreen display. If you use the 'new way' your site would be enormous.

When you center your header (and thus also the content), it will be responsive to more screen sizes. See image below.

There are other reasons as well. Consider text length if you use such an alignment. Text line length will be too long and hard to read because of that.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.