如何解决一行放多个item后，item中间间隔相等且两边无空隙的问题

问题：
在我们进行布局时, 我们经常会遇到要求中间摆放多个item，且两边不需要空隙的情况，我们通常会使用float浮动布局，然后设置margin-right/margin-left让他们之间产生间距, 那么这样会导致最后总有一个元素设置的margin-right/margin-left是多余的
解决方法：
解决办法一: 每一行的最后一个元素, 总是加一个class, 通过类选择器去除这个margin-right
解决办法二: 通过伪类选择器，但是不支持IE8，或者会导致存在兼容性问题
解决办法三（最优解）:
width of block （包裹块）= content-width（auto） + margin-left + margin-right + padding+border，因为一般 padding和border都是0，即通常这个公式可以简化为：
width of block （包裹块）= content-width（auto） + margin-left + margin-right
所以当包裹块的宽度固定的时候，不设置 content-width的宽度，再设置margin的宽度为负值可以加大包裹块的宽度.
代码和具体实现如下所示：

<style>
        .container{
            width: 990px;
            height: 400px;
            background-color:pin