title: Can't seem to center my h1?
body: <p>I'm trying out some random stuff and seem to stumble upon a weird little annoyance. 
  I cannot center my H1, I tried text-align on the content <code>div</code> and <code>h1</code> itself, no effect.</p>
  
  <p>Can someone see the error I'm making? It must be something simple I'm overlooking.</p>
  
  <p>Where is my hero ? :D</p>
  
  <p>Here's is a link to my css/div, its an image.</p>
  
  <p><img src="https://i.stack.imgur.com/MFItk.png" alt="enter image description here"></p>
  
  <p>It doesn't get centered in the middle exactly :( </p>
  
  <p><img src="https://i.stack.imgur.com/ZLHaI.png" alt="enter image description here"></p>
  
  <p>Here is my HTML:</p>
  
  <pre><code> &lt;div id="content"&gt;
      &lt;h1&gt;Solid Design&lt;/h1&gt;           
  &lt;/div&gt;
  </code></pre>
  
  <p>and the CSS:</p>
  
  <pre><code>h1
  {
      display: inline;
      background-color: red;
      color: white;
      font-weight: bold;
      text-align: center;
      font-size: 2.5em;   
  }
  
  #content 
  {
      text-align: center;
  }
  #content p 
  {
      width: 750px;
  }
  </code></pre>