nav bar width is higher than its parent div - html

Question

I tried to create a navigation bar which should fit inside a div id called #page_wrap
itd width is 980px when i tried with firebug i am seeing that #nav selection is bigger than #page_wrap.Why this is happening.
my intention is the nav bar should not go outside the #page_wrap
Here is the Code
HTML
<div id="page_wrap">
<ul id="nav">
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
<li>Menu6</li>
<li>Menu7</li>
<li>Menu8</li>
<li>Menu9</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;
}
See the image it has empty spaces in start and end. Why there are empty spaces in the start and End. How to avoid those things. I believe this is what causing a problem of bigger than its parent.
How to Remove Start and End emtpy Spaces and how to place #nav inside #page_wrap exactly which means it should not go out from #page_wrap. Any Help?
Check this JSFIDDLE

Answer 1

Remove default padding for the UL.
ul#nav{padding:0;}

Answer 2

LIke this
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

Use this at the start of your css
* {
padding: 0;
}