html - 列表项未填充 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

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

查看更新的 Fiddle:http://jsfiddle.net/VRtnA/18/