我无法让我的菜单栏居中（CSS）

Question

菜单栏本身是居中的，但菜单栏内的按钮不是。关于如何解决它的任何想法？

我真的不知道自己在做什么，因此感谢您的帮助：D。

.main-navigation {
   clear:both;
   display:block;
   float:left;
   width:100%;
 }

nav.main-nav .container {
   padding:0;
   text-align:right;
 }

.container {
   margin-left:auto;
   margin-right:auto;
   padding-left:15px;
   padding-right:15px;
 }

ul#primary-menu li a {
   color:#404040;
   font-size:14px;
   font-weight:100;
   letter-spacing:2px;
   margin-right:35px;
   text-decoration:none;
   text-transform:uppercase;
 }

ul#primary-menu > li > a {
   line-height:40px;
 }

.main-navigation a {
   display:block;
   text-decoration:none;
 }

Answer 1

尝试在您的“.main-navigation”中使用它，您的菜单栏应该居中，因为它的宽度：100%，只要它是您的父元素，这应该可以工作

text-align: center;

另外，试着把它放在你的 ul 中

display: block;
<!-- if its horizontal -->
display: inline-block;

body, html{
    margin: 0;
    height: 100%;
}
.nav{
  width: 100%;
  height: 50px;
  background-color: black;
  text-align: center;
  
}
.nav ul{
  margin: 0;
  list-style-type: none;
  
}
.nav li{
  display: inline-block;
  border: 1px solid white;
  width: auto;
  height: 20px;
  margin-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.nav a{
  text-decoration: none;
  color: white;
  transition: background-color 2s;
  transition: color 2s;
}

<div class="nav">
  <ul>
      <li>
          <a href="#">Home</a>
      </li>
      
      <li>
          <a href="#">About Us</a>
      </li>
      
      <li>
          <a href="#">Contact Us</a>
      </li>
   </ul>
</div>