Html 在标题中对中此导航元素时出现问题

我在网站上工作的一些经验，我有这个元素的问题。我不太清楚发生了什么事。在检查中，id

headerInner

和class

navLogo

为1200 x 0像素。我想做的是将所有这些链接和徽标放在一个框中，并将其放在标题的中心，但结果是：

HTML:

像这样将ul放入div.menu-container中

<div class="menu-container">
  <ul>
   [...]
 </ul>
</div>

视觉表现

header {
  margin: 0 auto;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px; 
  background-color: #a30101;
  width: 95%;
  height: 86px;
}

#headerInner {
  max-width: 1200px;
  margin: 0 auto;
}

#logo {
  margin: 20px;
  float: left;
  width: 200px;
  height: 60px;
  background: url(img/logo.png) no-repeat center;
}

nav {
  margin: 0 auto;
  padding: 0;
}

.navLogo {
  margin: 0 auto;
}

#menuIcon {
  display: hidden;
  width: 40px;
  height: 40px;
  background: url(img/nav.png) center;
}

a:hover#menuIcon {
  border-radius: 4px 4px 0 0;
}

ul {
  list-style-type: none;
}

nav ul li {
  font-family: 'Alegreya', sans-serif;
  font-size: 150%;
  display: inline-block;
  float: left;
  padding: 10px;
}

<div class="menu-container">
  <ul>
   [...]
 </ul>
</div>

.menu-container {
 text-align: center;
}

ul {
 display: inline-block;
 margin: 0;
 padding: 0;
}