css - ナビゲーションバーHTML5 cssの奇妙な左揃えの問題

Question

幅 950px のコンテナの左側にナビゲーション バーを揃えようとしていますが、左側にまだ余白が表示されています。左マージンを負に指定せずに完全に左揃えにするにはどうすればよいですか?

JSFiddle

HTML5 コード

<div class="nav-holder">
    <nav class="container">
        <ul>
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="#">Programs</a></li>
        <li><a href="#">Marketing tools</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Faq</a></li>
        <li><a href="#">Contact us</a></li>
        <li><a href="#">Sign Up</a></li>
         </ul>
    </nav>
</div><!-- nav holder -->

CSS

body{margin:0}
ul {
    list-style: none;
}
.container {
    width: 950px;
    margin: 0 auto;
}
.nav-holder {
    overflow: hidden;
    background: url('images/nav-bg.jpg') repeat-x;
}
.nav-holder nav {
    overflow: hidden;
    margin-top: -3px;
    margin-bottom: 12px;
}

.nav-holder li {
    float: left;
}
.nav-holder li a {
    display: block;
    text-decoration: none;
    color: #ff0202;
    padding: 4px 23px;
    text-transform: uppercase;
    font-size: 14px;
    text-shadow: 1px 1px 1px #FFF;
}
.nav-holder li a:hover,.nav-holder li.active a {
    background: rgba(162, 162, 162, 0.7);
}

Answer 1

私が間違っていなければ、すべてのリスト (ul と ol) にはデフォルトのインデントが関連付けられています。padding: 0;以下のように ul の CSS ルールにa を追加してみてください。

ul {
    padding: 0;
    list-style: none;
}

Answer 2

使用するpadding-left

http://jsfiddle.net/fDJA8/4/

ul {
    padding-left : 0px;
}