title: Center content area around font?
body: <p>I have noticed that the content area around my font is not centered. This is causing issues because I want to apply a background to the header but it looks really ugly when not centered. Without placing another div wrapper around it, is there any better solution that can fix this problem? Also, does anyone know why this problem occurs for some fonts?</p>
  
  <p>Here is my CSS code for good measure.</p>
  
  <pre><code>header h1 { 
      font-family: komika_axisregular;
      font-size: 10em;
      color: #f7f7f8;
      margin: 100px 0 50px 0;
      line-height: 0.7em;
      background-color: rgba(46, 52, 54, 0.5);
  }
  </code></pre>
  
  <p>Here is an example of the problem font, and then an example of a good font. Both are using the exact same CSS code.<br>
  <img src="https://i.stack.imgur.com/A01Km.png" alt="Problem font">
  <img src="https://i.stack.imgur.com/kDsFn.png" alt="Good Font"></p>