title: margin: auto is not centering
body: <p>In the following style from the website: <a href="http://6.470.scripts.mit.edu/css_exercises/exercise4.html" rel="noreferrer">http://6.470.scripts.mit.edu/css_exercises/exercise4.html</a></p>
  
  <pre><code>&lt;style type="text/css"&gt;
    #sponsors {
           margin:auto;
           margin-top:50px;
           overflow: hidden;
           width: auto;
           display: inline-block;
    }
    div.image img {
           margin: 3px;
           border: 1px solid #ffffff;
    }
    div.image a:hover img {
          border: 1px solid;
    }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;h1&gt;Sponsors of 6.470&lt;/h1&gt;
   &lt;div id="sponsors"&gt;
     &lt;div class="image"&gt;&lt;a href=""&gt;&lt;img src="images/appian.png" width="150" height="85"&gt;&lt;/a&gt;&lt;/div&gt;
     &lt;div class="image"&gt;&lt;a href=""&gt;&lt;img src="images/dropbox.png" width="150px" height="85px"&gt;&lt;/a&gt;&lt;/div&gt;
     &lt;div class="image"&gt;&lt;a href=""&gt;&lt;img src="images/facebook.png" width="150px" height="85px"&gt;&lt;/a&gt;&lt;/div&gt;
     &lt;div class="image"&gt;&lt;a href=""&gt;&lt;img src="images/nextjump.png" width="150px" height="85px"&gt;&lt;/a&gt;&lt;/div&gt;
     &lt;div class="image"&gt;&lt;a href=""&gt;&lt;img src="images/palantir.png" width="150px" height="85px"&gt;&lt;/a&gt;&lt;/div&gt;
     &lt;div class="image"&gt;&lt;a href=""&gt;&lt;img src="images/quora.png" width="150px" height="85px"&gt;&lt;/a&gt;&lt;/div&gt;
     &lt;div class="image"&gt;&lt;a href=""&gt;&lt;img src="images/tripadvisor.png" width="150px" height="85px"&gt;&lt;/a&gt;&lt;/div&gt;
     &lt;div class="image"&gt;&lt;a href=""&gt;&lt;img src="images/vecna.png" width="150px" height="85px"&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>if the <code>width: auto</code> is removed from <code>#sponsors</code> then the <code>div#sponsors</code> is not center aligned even though <code>margin: auto</code> is used. </p>
  
  <p>Similarly if instead of <code>text-align: center</code> is replaced by <code>margin: auto</code> in body style above, then the <code>&lt;h1&gt;</code> will not be center aligned which is preposterous; </p>
  
  <p>because I have used <code>margin: auto</code> a lot of times and it was able to center the content without any issue. So hence help me and I will appreciate this a lot.</p>
  
  <p>PS: I used firefox and besides use the <code>doctype</code> tag it is still not able to center with <code>margin: auto</code>.</p>