title: How can I center a headline in CSS?
body: <p>Newbie here with a simple (and no doubt dumb) question. </p>
  
  <p>I’m trying to center a headline. I tried using the text-align property in CSS but to no avail:</p>
  
  <pre><code>h1 {
       text-align: center;
  }
  </code></pre>
  
  <p>The headline is still flush left.</p>
  
  <p>After doing a bit of digging, I tried this:</p>
  
  <pre><code>h1 {
       margin: 0 auto;
  }
  </code></pre>
  
  <p>Still no luck. I then tried putting the headline into a DIV with the id "headline":</p>
  
  <pre><code>#headline {
       text-align: center;
  }
  </code></pre>
  
  <p>And, when that still didn't work, I tried:</p>
  
  <pre><code>#headline {
       margin: 0 auto;
  }
  </code></pre>
  
  <p>No luck. </p>
  
  <p>I then came across a previous discussion about centering a DIV in CSS. One poster said that "a  element fills 100% of parent element's width. If you want to center it, then the first thing you have to do is make it less than 100% wide. So set a width on the div, 200px or something."</p>
  
  <p>When I tried </p>
  
  <pre><code>#headline {
       width: 1200px;
       margin: 0 auto;
  }
  </code></pre>
  
  <p>nothing happened.</p>
  
  <p>But when I tried:</p>
  
  <pre><code>#headline {
       width: 1200px;
       text-align: center;
  }
  </code></pre>
  
  <p>the headline did shift to the center. The thing is, it isn't perfectly centered.</p>
  
  <p>I've tried adjusting the width. That helps some but when I make the window bigger or smaller, the headline is no longer centered.</p>
  
  <p>Any suggestions?</p>
  
  <p>Apologies in advance for any inadvertent <i>faux pas</i> (this is my first time posting). Thanks for your help. </p>