title: margin: 0 auto not centering?
body: <p>I've tried the following code in Chrome, Firefox, and Safari, but my div isn't quite being centered.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html&gt; 
  &lt;head&gt; 
      &lt;link href="custom.css" media="screen" rel="stylesheet" type="text/css" /&gt;
  &lt;/head&gt; 
  &lt;body&gt;  
      &lt;div class="center"&gt;Hello!&lt;/div&gt;
  &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>
  
  <p>custom.css:</p>
  
  <pre><code>.center {
    width: 400px;
    margin: 0 auto;
    border: 5px solid black;
  }
  </code></pre>
  
  <p>This produces the following in Chrome:
  <img src="https://i.stack.imgur.com/y0BWO.png" alt="alt text"></p>
  
  <p>and you can see that the left margin is bigger than the right margin.</p>
  
  <p>What am I doing wrong?</p>