列表项没有填充ul的宽度

Question

我有一个列表，我想填充容器的宽度，但由于某种原因，最后似乎有一个小的差距。

CSS很长，所以这里是html

<div class="line clearfix no-margin">
    <div class="container">
        <header>
            <div class="logo col-4">
                <img src="#" />
                 <h1 class="logo">Name</h1>

            </div>
            <div class="nav clearfix">
                <ul>
                    <li><span id="head-icon"></span>About Us</li>
                    <li><span id="wrench-icon"></span>Services</li>
                    <li><span id="email-icon"></span>Contact</li>
                </ul>
            </div>
        </header>
    </div>
</div>

Demo

我似乎无法弄清楚差距来自何处。

Answer 1

这是因为margin-left: -3px;中的.nav li！

请参阅更新的小提琴：http://jsfiddle.net/VRtnA/18/

Answer 2

尝试删除margin-left: -3px;中的.nav li。