Центрирование логотипа в навигационной панели

Мне сложно определить, как центрировать мой логотип внутри навигационной панели с неравномерным количеством ссылок на каждой стороне.

Я прочитал об использовании @media запросов с li: n-м ребенком в CSS с плавающими свойствами, чтобы исправить это, но я не смог.

Имейте в виду, что навигационные ссылки должны быть направлены к центру экрана, а не к сторонам (в отличие от этого: панель навигации с центрированным логотипом).

Вот мой код:

<header>
<div id="navbar">

        <ul>

            <li><a href="#minigolf"><div id="minigolfdiv" class="navdiv">MINIGOLF</div></a></li>

            <li><a href="#bowling"><div class="navdiv">BOWLING</div></a></li>

            <li><a href="#arrangementer"><div class="navdiv">ARRANGEMENTER</div></a></li>

            <li><a href="#"><div class="navdiv"><h2 id="logo">Funcity sport</h2></div></a></li>

            <li><a href="#priser"><div class="navdiv">PRISER</div></a></li>

            <li><a href="#aabningstider"><div class="navdiv">ÅBNINGSTIDER</div></a></li>

            <li><a href="#madogdrikke"><div class="navdiv">MAD & DRIKKE</div></a></li>

            <li><a href="#kontakt"><div class="navdiv">KONTAKT</div></a></li>

        </ul>

</div>

header{
display:block;
width:100%;
height:70px;
background-color:red;
}

#navbar{
display:inline-block;
height:70px;
width:auto;
float:left;
}

.navdiv{
height:100%;
width:100%;
padding: 0 10 0 10;
background-color:white;
border: 1px solid;
}

#logo{
background:url("media/logo.png") center no-repeat;
width:220px;
height:70px;
text-indent:-9999999999px;
margin: 0 0 0 0;
}

#minigolf, #bowling, #arrangementer, #priser,
#aabningstider, #madogdrikke{
height:1000px;
background-color:blue;
}

ul{
margin:0 0 0 40px;
padding:0 0 0 0;
list-style-type:none;
}

li{
display:inline-block;
height:70px;
background-color:white;
margin:0 0 0 0;
vertical-align:middle;
line-height:70px;
}

@media (min-width: 500px) {

    .navdiv li:nth-child(1), .navdiv li:nth-child(2), .navdiv li:nth-child(3){
        float:left;
    }

    .navdiv li:nth-child(5), .navdiv li:nth-child(6), .navdiv li:nth-child(7),      li:nth-child(8){
        float:right;
    }
}