Home/ Questions/Q 8009449
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T18:27:15+00:00

I’ve noticed that if I view the page at wider resolution, the content of

  • 0

I’ve noticed that if I view the page at wider resolution, the content of a section gets aligned to the right, instead of centered.

I use

margin: 0 auto;
width: 998px;
overflow: hidden;

It seems to have this bug, at least in Safari, Firefox and Chrome. I tried disabling overflow: hidden and it gets rid of the bug, but messes up my floats inside the content.

You can see an example at the page live here:
http://autouncle.dk/da/brugte-biler/Kia or http://autouncle.dk/da/brugte-biler/Ford (you have to view it at at least 1500px widescreen to see the bug).

Any ideas on what can cause this bug and what are possible solutions?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    About the reason of the problem: this is due to the page-title element of your header:

    #header-outer element contains some floated elements but you forgot a clearing, so the offset left of the main section of your site starts where the page-title ends. (you can verify this by hiding page-title element — when you set display: none the page is correctly centered)

    enter image description here

    So adding

    body#basic_page #header-outer {
   overflow: hidden;
}

    you solve the problem

    As a sidenote strongly avoid to put empty div only for clearing purposes: there’re cleaner methods that don’t require extra markup, like easyclearing

    • 0