Center div inside header

Center div inside header

I am trying to center the logo for my last media query targeting screens
below 479px. I am having trouble. Every time I have margin auto, the
browser pushes the img to the right. This is what I have so far. Any help
would be greatly appreciated.
<div class="wrapper">
<header>
<div id="logo">
<img src="images/Bliss_FinalLogo_2.png" alt="Logo" />
</div>
</header>
@media only screen and (max-width: 479px){
li.main_nav{
float:none;
width:100%;
}
.learn_info{
width:100%;
}
nav{
margin: 0 auto;
background: none;
border:none;
}
#logo{
display: block;
margin-left:auto;
margin-right:auto;
}
a{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px
}
}