How to stop divs from moving other divs

Question

I need the text Santos Fire Department to say where it is but have the US Server ext. centered. Is there any way to make the divs not collide with each other? I tried position absolute but it just moved the text into the the other buttons.

    li a:hover.nav {
      background-color: #111;
    }

    .navlogo {
      display: block;
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
      float: left;
      height: 3.3em;
      display: inline-block;
      position:
    }

    li a.navlogo {
      display: block;
      color: white;
      text-align: center;
      padding-top: 10px;
      margin-left: 10px;
      font-size: 150%;
      text-decoration: none;
      z-index: -1;
    }

    ul.nav {
      display: block;
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
      text-align: center;
      height: 3.3em;

    }

    li a.nav {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

<nav class="navbar">
  <ul class="nav">
    <li class="navlogo"><a class="navlogo">Santos Fire Department</a>
    </li>
    <li class="nav"><a class="nav" href="ts3server://ts.santosrp.com/">TeamSpeak (Temp Server)</a>
    </li>
    <li class="nav"><a class="nav" href="steam://connect/158.69.123.91:27015">US Server</a>
    </li>
    <li class="nav"><a class="nav" href="steam://connect/158.69.123.91:27015">EU Server</a>
    </li>
    <li class="nav"><a class="nav" href="https://santosrp.com/">SantosRP</a>
    </li>
  </ul>
</nav>

Answer 1

Class name not same for ul and li.Please check this code

li a:hover.nav {
    background-color: #111;
}
.navlogo{
    display: block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    float:left;
    height: 3.3em;
    display:inline-block;
    position: 
}

li a.navlogo{
    display: block;
    color: white;
    text-align: center;
    padding-top: 10px;
    margin-left: 10px;
    font-size: 150%;
    text-decoration: none;
    z-index: -1;
}

ul.nav{
    display: block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    text-align: center;
    height: 3.3em;
}

li a.nav{
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
   .nav li/*for display in one line*/
{
  float: left;
}

<nav class="navbar">
    <ul class="nav" >
        <li class="navlogo"><a class="navlogo">Santos Fire Department</a></li>
        <li class="" ><a class="nav" href="ts3server://ts.santosrp.com/">TeamSpeak (Temp Server)</a></li>
        <li class=""><a class="nav" href="steam://connect/158.69.123.91:27015">US Server</a></li>
        <li  class=""><a  class="nav" href="steam://connect/158.69.123.91:27015">EU Server</a></li>
        <li class=""><a class="nav" href="https://santosrp.com/">SantosRP</a></li>
    </ul>
</nav>