li列表两端对齐问题

这个图中灰色块两端对齐，我现在用nth-child(3n)设置margin-right:0可以对齐

代码：

<div class="banner"></div>
<div class="box">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

CSS

*{margin: 0;padding: 0;}
.banner{width:1000px;height: 200px;background: #f00;margin: 0 auto;}
.box{width:1000px;margin: 0 auto;}

ul{overflow: hidden;}
li{
    float: left;
    width:320px;
    height: 200px;
    background: #ccc;
    list-style: none;
    margin-right: 20px;
    margin-bottom: 20px;
}
li:nth-child(3n){
    margin-right: 0;
}