ширина навигационной панели выше, чем его родительский DIV

Question

Я попытался создать навигационную панель, которая должна соответствовать внутри сНу ид называется #page_wrap ширина ОИТ является 980px, когда я пытался с поджигатель я вижу, что #nav выбор больше, чем #page_wrap .Why это происходит.

мое намерение есть бар нав не должны выходить за пределы #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; 
} 

См. Изображение с пустым пространством в начале и конце. Почему есть пустые места в начале и в конце. Как этого избежать. Я считаю, что это то, что вызывает проблему больше, чем ее родитель.

Как удалить начальные и конечные пространства emtpy и как разместить #nav внутри #page_wrap, что означает, что он не должен выходить из #page_wrap. Любая помощь?

Check this JSFIDDLE

Answer 1

Удалить набивка по умолчанию для UL.

ul#nav{padding:0;} 

Answer 2

LIKE этого

demo

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 3

Используйте это в начале вашего CSS

* { 
padding: 0; 
}