Search code examples
htmlcsscentering

Issues with centring section, header is fixed and width is 100%

I'm trying to make the section to be centred to the screen. The header is fixed and header-container is fixed as well. Header-container contains the logo, nav and social links.

Saying the header and header-container are using top:0;, I can't seem to get my head around to getting it to work. I know by using margin: 0 auto; would centre it, but not in this case.

Edit: Whenever I seem to centre it, when I zoom out it shoots to the left side, The header seems to stay centred, which is the result that I'm looking for.

Screenshot

HTML:

<header>
    <div id="header-container">
        <nav></nav>
        <div id="social"></div>
    </div>
</header>
<section></section>

CSS:

body {
font-family: 'Open Sans', sans-serif;
text-align: center; 
    position: relative;
    margin: 0 auto;
    background: #ccc;
}

#wrapper {
    width: 1048px;
    min-height: 800px;
    text-align: left;
    margin: 0;
    padding: 0;
}

header {
    width: 100%;
    height: 86px;
    text-align: center;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: fixed;
    top:0;
    background-image: url("../images/header-banner.png");
    border-bottom: 2px solid #5d5d5d;
}
div#header-container {
    width: 1048px;
    height: 86px;
    position: relative;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    border: 1px solid green;
}
section {
    width: 1048px;
    min-height: 500px;
    background:#fff;
    margin:86px auto 0;
    z-index: -1;
    position: relative;
}
Solution

  • If your width is 100% of it's container, margin: 0 auto; will not work in most browsers. Change it to 98% and it will correctly auto center. This will also happen if the width is set by pixels or any other measurement type.