CSS header 不居中

Question

我正在尝试在我现在的顶部获得高度为 40px 的导航栏，而且我 position:fixed; 唯一的问题是，我放在他显示的 div 中的所有内容向右，而不是我想要的中心，导航栏需要 100%

JS Fiddle

这是我的 .css 代码:

.container{
        height:auto;
        margin-top:-10px;
        margin-left:-7px;
}
/*========================= TOP HEADER =========================*/
.banner{
        margin: 0pt auto;
        width:100%;
        background-color:#d9d8d6;
        border-style:solid;
        border-width:1px;
        border-color:#000000;
        position:fixed;
        position: absolute;
}
.banner-container{
        height:40px;
        background-image:url('http://i.imgur.com/WoVWvmy.png');
        background-size:40px 30px;
        background-repeat:no-repeat;
        position:center;
        text-align:center;
}

我在 index.php 中使用的这些 div

        <div class="container">
        <div class="banner">
            <div class="banner-container">
            </div> <!-- END BANNER-CONTAINER -->
        </div> <!-- END BANNER -->
    </div> <!-- END CONTAINER -->

Answer 1

我稍微调整了一下。请参阅:JS Fiddle

HTML

<div class="banner">
    <div class="banner-container"></div>
    <!-- END BANNER-CONTAINER -->
</div>
<!-- END BANNER -->

CSS

body {
    margin: 0;
}
/*========================= TOP HEADER =========================*/
 .banner {
    margin: 0pt auto;
    width:100%;
    background-color:#d9d8d6;
    border-style:solid;
    border-width:1px;
    border-color:#000000;
    position:fixed;
}