Centering text on a navigation bar
<p>I need to center these links while leaving Santos Fire Department where it is
BTW the only reason that Santos Fire Department has two different tags is to avoid the hover animation. </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>ul.nav{
    display: block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    height: 3.3em;
}
ul.nav li {
    float:left;
}
ul.nav li a{
    display: block;
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    text-align: center;
}
ul.nav li .navlogo{
    overflow: hidden;
    background-color: #333;
    height: 3.3em;
}
ul.nav li a.navlogo{
    display: inline-block;
    padding-top: 10px;
    margin-left: 10px;
    font-size: 150%;
    z-index: -1;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav class="navbar"&gt;
        &lt;ul class="nav"&gt;
            &lt;li id="logo"&gt;&lt;a class="navlogo"&gt;Santos Fire Department&lt;/a&gt;&lt;/li&gt;
            &lt;li id="nav"&gt;&lt;a href="ts3server://ts.santosrp.com/"&gt;TeamSpeak (Temp Server)&lt;/a&gt;&lt;/li&gt;
            &lt;li id="nav"&gt;&lt;a href="steam://connect/158.69.123.91:27015"&gt;US Server&lt;/a&gt;&lt;/li&gt;
            &lt;li id="nav"&gt;&lt;a href="steam://connect/158.69.123.91:27015"&gt;EU Server&lt;/a&gt;&lt;/li&gt;
            &lt;li id="nav"&gt;&lt;a href="https://santosrp.com/"&gt;SantosRP&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/nav&gt;</code></pre>
</div>
</div>
</p>