将 h1 置于标题中心？

Question

我试图将其fofam(h1)置于页面的中心。但由于nav和logo，我遇到了麻烦。帮助？我已经尝试修复它有一段时间了，但我似乎无法让它发挥作用。我尝试过内联等。

<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

将宽度设置h1为 100%，如下所示：

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

小提琴