html - ナビゲーション バーの幅が親の div よりも大きい

Question

itd width と呼ばれる div ID 内に収まるナビゲーション バーを作成しようとしましたが、#page_wrap firebug で試したときに 980px#navです#page_wrap。

私の意図は、ナビゲーションバーが外に出てはならないということです#page_wrap

コードはこちら

HTML

<div id="page_wrap">
        <ul id="nav">
            <li><a href="#">Menu1</a></li>
            <li><a href="#">Menu2</a></li>
            <li><a href="#">Menu3</a></li>
            <li><a href="#">Menu4</a></li>
            <li><a href="#">Menu5</a></li>
            <li><a href="#">Menu6</a></li>
            <li><a href="#">Menu7</a></li>
            <li><a href="#">Menu8</a></li>
            <li><a href="#">Menu9</a></li>
        </ul> <!-- END Navigation Bar-->
    <div id="content">
    </div>
</div> <!-- END page_wrap -->

CSS

ul#nav {
    list-style: none;
    width:980px;
    height:35px;
    background:#000000;
}
ul#nav li a {
    float:left;
    color:white;
    text-decoration: none;
    width:105px;
    line-height: 35px;
    border-right: 2px solid #979797;
    text-align: center;
}
ul#nav li a:hover {
    background: #979797;
}
#page_wrap {
    margin:0 auto;
    width:980px;
}

最初と最後に空のスペースがある画像を参照してください。start と end に空白があるのはなぜですか。それらを回避する方法。これが親よりも大きな問題を引き起こしていると思います。

開始と終了の空のスペースを削除する方法と#nav#page_wrap 内に正確に配置する方法#page_wrap。ヘルプはありますか？

このJSFIDDLEをチェックしてください

Answer 1

このような

デモ

CSS

  *{
    margin:0;
    padding:0;
}
ul#nav {
    list-style: none;
    width:980px;
    height:35px;
    background:#000000;
    margin:0 auto;
    padding:0;

}
ul#nav li a {
    float:left;
    color:white;
    text-decoration: none;
    width:105px;
    line-height: 35px;
    border-right: 2px solid #979797;
    text-align: center;
}
ul#nav li a:hover {
    background: #979797;
}

#page_wrap {
    margin:0 auto;
    width:980px;
}

Answer 2

css の先頭でこれを使用します。

* {
padding: 0;
}