title: Center h1 in center of header?
body: <p>I am trying to center that <code>fofam(h1)</code> to be in the center of the page. But because of the <code>nav</code> and <code>logo</code>, I am having trouble. Help? I have been trying to fix it for awhile, but I can't seem to get it to work. I have tried inline, etc.</p>
  
  <pre><code>&lt;style&gt;
      header {
          height:300px;
          margin:0 auto;
          background:#21628c;
          font-family:arial;
          text-transform:uppercase;
      }
      div.logo svg{
          float:left;
          padding:10px 30px;
          display:inline-block;
      }
      nav{
          float:right;
          color:#000000;
          display:inline-block;
          padding: 20px 20px;
      }
      nav a{
              margin-left:30px;
              color:black;
      }
      nav a:hover{
          color:white;
          font-size:20px;
      }
      h1{
          color:white;
          font-size:72px;
          text-align:center;
          display:inline-block;
          position:relative;
  
      }
      h1 span{
          border:10px solid white;
          padding: .2em .5em; 
      }
      p.descripton{
          text-align:center;
          color:white;
  
      }
  &lt;/style&gt;
  &lt;header&gt;
      &lt;title&gt;Mikhaila&lt;/title&gt;
      &lt;div class="logo"&gt;&lt;svg...&lt;/svg&gt;&lt;/div&gt;
      &lt;nav&gt;
          &lt;a href=""&gt;Mission&lt;/a&gt;
          &lt;a href=""&gt;Events&lt;/a&gt;
          &lt;a href=""&gt;Contact Us&lt;/a&gt;
      &lt;/nav&gt;
      &lt;h1&gt;&lt;span&gt;FOFAM&lt;/span&gt;&lt;/h1&gt;
      &lt;p class="descripton"&gt;Friends of Free Arts Minnesota&lt;/p&gt;
  
  &lt;/header&gt;
  </code></pre>