title: h2 element won't stay centered unless it is set to 100%
body: <p>This seems like it should be a very simple issue to me, although I just can't figure it out on my own. I have a <code>h2</code> element that I want to keep at 85%, and it contains a short line of text. I want it to be centered in its containing <code>div</code>, not just for the text to be centered in the <code>h2</code> element.
  Here's some code:</p>
  
  <pre><code>&lt;div class="main"&gt;
    &lt;div class="secondary"&gt;
        &lt;h2&gt;Three words of text&lt;/h2&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div.main{
    text-align:center
  }
  div.secondary{
    text-align:center
  }
  h2{
    text-align:center
    width:85%
  }
  </code></pre>
  
  <p>I made a <a href="http://jsfiddle.net/wF57b/" rel="nofollow">Fiddle</a>, too</p>
  
  <p>Thanks to anyone who can help.</p>