title: Text won't center in header
body: <p>I've been trying to get the "Header" text to be centered and the icon to stay. </p>
  
  <p><code>text-align: center;</code> won't work for me.</p>
  
  <p>Anyone can lead me in the right direction?</p>
  
  <p>Thanks.</p>
  
  <p>IMG:</p>
  
  <p><a href="https://i.stack.imgur.com/eEnxd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eEnxd.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    .header {
        padding-top: 15px;
        padding-bottom: 15px;
        color: #fff;
        background: #333;
      }
      
      .header a {
        text-align: center;
        text-decoration: none;
        color: #fff;
        font-size: 32px;
        vertical-align: middle; 
      }
      
      #hamburger {
        color: white;
        font-size: 32px;
      }
      
      .menu {
        display: inline-block;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="headerwrapper"&gt;
        &lt;div class="header"&gt;
      
        &lt;div class="menuWrap"&gt;
          &lt;div class="menu open"&gt;
            &lt;span id="hamburger" class="fas fa-bars hvr-grow"&gt;&lt;/span&gt;
          &lt;/div&gt;
            &lt;a href="index.php"&gt;Header&lt;/a&gt;
        &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>