Элементы списка не заполняют ширину 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.