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.
Issues with centring section, header is fixed and width is 100%
Pergunta
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.
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;
}
Solução
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow