文本对齐：列表项目块

Question

我使用媒体查询创建了简单的自适应导航菜单。我遇到了奇怪的情况。将text-align:center应用于块中的中心文本后，第一个li元素会稍微向左移动，其他元素会居中。我无法弄清楚问题是什么。我试过margin: 0 auto，它对我不起作用。 这就是发生的事情：

以下是代码：

<header>
  <div class="logo">Logo</div>
  <div class="menu" role="button">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <nav class="navigation">
    <ul>
      <li>home</li>
      <li>blog</li>
      <li>team</li>
      <li>contact</li>  
    </ul>
  </nav>   
</header>

CSS：

header{
  background:grey;
  .logo{
    font-size:40px;
    color:white;
    background:blue;
    width:200px;
    display:inline-block;
  }
  .menu{
    display:inline-block;
    float:right;
  }
  nav{
    display:inline-block;
    ul{
      margin:0;
      padding:0;
      li{
      display:inline-block;
      margin: 0 20px;
      background:orange; 
      }
    }
  }
}
@media screen and(max-width:600px){
  header{
    .menu{
      display:inline-block;
      height: 40px;
      width: 40px;
      margin:10px;
      span{
        border-top: 5px solid #fff;
        display: block;
        margin: 5px 0;
      }
     }
    .navigation{
      display:block;
      ul{
        margin:0;
        padding:0;
        text-align: center;
        li{
          width:100%;
          display:block;
          background:orange;
          margin:0;
          }
        }
      }
    }
  }