html - 在主容器中居中导航

我正在尝试在主容器div中居中放置nav标签，但是右边似乎有太多空间。我尝试了margin：0自动方法以及显示：子元素上的inline / inline-block和text-align，但是它不起作用。

body {
  background: #000;
}

.main-container {
  margin: 0 auto;
  width: 90%;
  overflow: hidden;
  background: #fff;
}

.main-container nav {
  width: 100%;
  display: block;
  margin: 10px 0;
}
.main-container nav ul {
  list-style-type: none;
}

.main-container nav ul li {
  width: 48%;
  display: block;
  float: left;
  height: 300px;
  margin: auto auto 10px 10px;
}

.main-container nav ul li.one {
  background: url('http://media.npr.org/images/picture-show-flickr-promo.jpg');
  background-size: cover;
  overflow: hidden;
}

a {
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-align: center;
}

 a span {
   position: relative;
   top: 40%;
   font-size: 2em;
   z-index: 1000;
}

 <div class="main-container">
      <nav>
        <ul>
    	  <li class="fruits"><a href="one.html"><span> One </span></a></li>
    	  <li class="vegetables"><a href="two.html"><span> Two </span></a></li>
    	  <li class="carbohydrates"><a href="three.html"><span> Three </span></a></li>
    	  <li class="proteins"><a href="four.html"><span> Four </span></a></li>
    	  <li class="junk-food"><a href="five.html"><span> Five </span></a></li>
    	  <li class="health-tips"><a href="six.html"><span> Six </span></a></li>
        </ul>
      </nav>
    </div>

最佳答案

嗨，现在习惯了

.main-container nav ul{padding:0;}

或过去总是css reset

Demo