html - 需要导航栏修复

Question

我试图将我的导航栏定位到我网站的顶部中心，但我无法摆脱按钮之间的小空间。
我尝试了许多不同的 CSS 属性，但没有成功。

另外，我的导航栏内部不是在最中心，而是在右边一点？
怎么来的？

最后，我在底部添加了一些媒体查询，它们在左侧也有一些不需要的空间。
另外，它们并没有真正集中在中间。

这是我的 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>

Answer 1

你需要在 ul 上添加 css

ul {
   padding-left: 0;
}

header ul li {
   display: block;
   width: 100%;
}

header a {
   padding: 0;
   height: 30px;
   color: white;
   background: rgba(0,0,0,0.1);
   height: 60px;
   font-family: 'Roboto Slab', serif;
   text-decoration: none;
   text-transform: uppercase;
   letter-spacing: 2px;
   font-weight: 700;
}

它将以自己为中心。

Answer 2

header{text-align: center;}
header ul{
display: inline-block;
overflow: hidden;
}
header ul li{float: left;}