title: Center div inside header
body: <p>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. </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;header&gt;
          &lt;div id="logo"&gt;
              &lt;img src="images/Bliss_FinalLogo_2.png" alt="Logo" /&gt;
          &lt;/div&gt;
      &lt;/header&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>@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
      }
  
  }
  </code></pre>