CSS header doesn't go center - css

Question

I'm trying to get navigation bar of height 40px on the top which I've now, Also I position:fixed; the only problem is, everything what I put inside the divs he showing up to the right and not at the center which I want, the navigation bar need to be 100%
JS Fiddle
this is my .css code:
.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;
}
These divs I use in index.php
<div class="container">
<div class="banner">
<div class="banner-container">
</div> <!-- END BANNER-CONTAINER -->
</div> <!-- END BANNER -->
</div> <!-- END CONTAINER -->

Answer 1

I restructured a little bit. Please see: 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;
}

Answer 2

Here's your best bet.
Note I changed the HTML to use an img tag. It's easier to center these, and to manage them in general, than to do the same with CSS backgrounds:
<div class="container">
<div class="banner">
<img src="http://i.imgur.com/WoVWvmy.png" class="banner-container" />
</div> <!-- END BANNER -->
</div> <!-- END CONTAINER -->
CSS:
.container{
height:auto;
}
/*========================= TOP HEADER =========================*/
.banner{
width:100%;
background-color:#d9d8d6;
border-style:solid;
border-width:1px;
border-color:#000000;
text-align: center;
}