CSS，导航中的中心元素

Question

简单的问题，出了什么问题？我有菜单和徽标，我不能把它放在中心位置。我不知道为什么。

我的CSS代码：

#header {
  width: 100%;
  background-color: #515963;
}

#header #logo {
  width: 200px;
  margin-left: 80px;
  padding: 20px;
  float: left;
}

#header nav {
  float: right;
  margin-right: 80px;
  line-height: 104px;
}

#header nav .menuItem {
  float: right;
  color: #fff;
  text-transform: uppercase;
  font-size: 22px;
  letter-spacing: 0.8px;
  font-weight: 500;
  padding: 10px 30px 10px 10px;
}

#header nav .menuItem .item {
  cursor: pointer;

#header #logo {
    display: block;
    width: 200px;
    margin: 0 auto;
    clear: both;
  }
  #header nav {
    clear: both;
    width: 369px;
    margin: 0 auto;
    line-height: 104px;
  }
  #header nav .menuItem {
    padding: 0;
  }

<div id="header">
      <a href="#"><img id="logo" src="img/logo.png" alt="AFP"/></a>
      <nav>
        <div class="menuItem item1"><span class="item">kontakt</span></div>
        <div class="menuItem item2"><span class="item">produkty</span></div>
        <div class="menuItem item3"><span class="item">o nas</span></div>
        <div style="clear:both;"></div>
      </nav>
      <div style="clear:both;"></div>
 </div>

我得到了什么：

我在导航中使用 div ，因为我喜欢这样做。我希望徽标和菜单居中。我知道宽度，我不明白为什么margin: 0 auto;不起作用。

编辑：

我想达到这样的目的：

Answer 1

简单错误。您需要ID无法标记http://joxi.ru/eAOYEqBuxvRD9m

Answer 2

这种情况的最佳方式是flexbox。

#header{
  display:flex;
  justify-content:center;
  width: 100%;   
  flex-wrap:wrap;
  -webkit-flex-wrap:wrap;
}
#header #logo
{
  width:100px;
}
nav{
  display:flex;
  justify-content:center;
  width: 100%;
}
nav div {
	margin: 10px;
}

<div id="header">
      <a href="#"><img id="logo" src="https://www.gravatar.com/avatar/087039a00851e75ff483470e3aba89c9?s=48&d=identicon&r=PG" alt="AFP"/></a>
      <nav>
        <div class="menuItem item1"><span class="item">kontakt</span></div>
        <div class="menuItem item2"><span class="item">produkty</span></div>
        <div class="menuItem item3"><span class="item">o nas</span></div>
        
      </nav>
      <div style="clear:both;"></div>
 </div>