Search code examples
htmlcsscenter

Cannot center DIV

Hi!

This seems like a stupidly simple question, but I cannot seem to horizontally center the header DIV.

http://jsfiddle.net/1ucwafx6/

as you can see, the light blue rounded square is almost centered, but not quite. I've tried on multiple systems, browsers, and screen resolutions and the outcome is always the same. It is slightly further to the right. I really don't understand what is wrong here. I have also tried margin: 0 auto; however then it just doesn't do anything and just stays on the very left hand side.

Solution

  • It's due to the default margin on the body. Just set

    body { margin:0; }

    and you'll see the fix.