title: Can't center text HTML / CSS
body: <p>I'm VERY new to web development and I decided to work on a small project for practice. I've spent the last 30 minutes trying to center the "Where creativity lives" text directly below the logo and text but it's being difficult and not working, could anyone help? Also, if you have any tips with what I've made so far, I'd greatly appreciate it thanks!</p>
  
  <p>Here it is:
  <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>div.header {
      margin-left: auto;
      margin-right: auto;
      width: 440px;
      display: block;
  }
  
  h1 {
      font-family: 'Raleway', sans-serif;
      text-align: center;
      font-size: 100px;
      margin-top: auto;
      color: #27ae60;
  }
  
  h2 {
      font-family: 'Source Sans Pro', sans-serif;
      text-align: center;
  }
  
  #logo {
      width: 100px;
  }
  
  &lt;!-- begin snippet: js hide: false console: true babel: false --&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Reacts&lt;/title&gt;
      &lt;link href="styles.css" rel="stylesheet"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Raleway|Source+Sans+Pro" rel="stylesheet"&gt;
  &lt;/head&gt;
      
  &lt;body&gt;
  
  &lt;div class=header&gt;
  &lt;h1 style="float: right;"&gt;Reacts&lt;/h1&gt;
  &lt;img id="logo" style="float: left;" src="Logo.png"&gt;
  &lt;/div&gt;
  
  &lt;h2&gt;Where creativity lives.&lt;/h2&gt;
      
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>