I am trying to position my navbar to the top-center of my website, but I can't get rid of the small spaces between my buttons.  

I tried many different CSS properties, but without success.

Also, my inside the navbar is not at the very center, but a little bit to the right?  

How come?

Finally, I added some media queries at the bottom and they also have some unwanted space on the left.  

Plus, they are not really centered in the very middle.

Here is my JSFiddle: <http://jsfiddle.net/RHSab/96/>

```
<header>
    <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#" id="#logo"><img class="topleftlogo" src="images/logo.png"/></a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</header>

```