website not centered in firefox/chrome

Question

i am having a problem with my website on Widescreens on Firefox/Chrome. It's not centred for some reason, margin: 0 auto; is not working either. The website looks fine on normal screens or even wide screens with lower res but on 1900x1200 the content is not centered for some reason. However the website looks fine on IE 9 at 1900x1200. Here is the code:

jsfiddle.net/hXskH/

Any clues?

Answer 1

For it to be centered you need to add a width along with that margin: 0 auto; Most common width is 960px;

#main {
padding-bottom: 300px;
margin:0 auto;
position: relative;
width: 960px;
} 

Answer 2

You have not set width for #main, so as it is block level it has occupied full width ie 100%.

Set the width for element.

#main {
padding-bottom: 300px;
margin:0 auto;
width:<your-width>;
position: relative;
}