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>

デモ

そのギャップがどこから来ているのか理解できないようです。

Answer 1

のせいmargin-left: -3px;です.nav li！

更新された Fiddle を参照してください: http://jsfiddle.net/VRtnA/18/

Answer 2

で削除margin-left: -3px;してみてください.nav li。