Center h1 in center of header?

Question

I am trying to center that fofam(h1) to be in the center of the page. But because of the nav and logo, 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.

<style>
    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;

    }
</style>
<header>
    <title>Mikhaila</title>
    <div class="logo"><svg...</svg></div>
    <nav>
        <a href="">Mission</a>
        <a href="">Events</a>
        <a href="">Contact Us</a>
    </nav>
    <h1><span>FOFAM</span></h1>
    <p class="descripton">Friends of Free Arts Minnesota</p>

</header>

Answer 1

Set h1 width to 100% like this:

h1{ 
    color:white;
    font-size:72px;
    text-align:center;
    display:inline-block;
    position:relative;
    width:100%; /*Add this*/
   }

fiddle