I'm struggling to center the logo in my media query for screens below 479px. Whenever I use margin auto, the image gets pushed to the right by the browser. Here is what I have so far and any assistance would be greatly appreciated.
HTML
<div class="wrapper">
<header>
<div id="logo">
<img src="images/Bliss_FinalLogo_2.png" alt="Logo" />
</div>
</header>
CSS
@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
}
}