在主容器中居中导航

Question

我试图将nav标签置于主容器div中，但它似乎在右侧有太多空间。我尝试了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>

Answer 1

您好已经习惯了

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

或曾经常常css reset

<强> Demo

Answer 2

问题： 默认情况下，ul元素包含padding和margin。您必须将这些属性设置为0。

Jsfiddle

 .main-container nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}