Extra space in the right of div - css

Question

I have extra space in the right side of my div. I have tried overflow:hidden and clear but i cannot get rid of it :(
This is my Html
<div id="menu">
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Team</li>
<li>Gallery</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
This is the CSS
#menu{
width: 800px;
height: auto;
border: none;
line-height:0;
margin-bottom: 10px;
}
/* Navigation */
#nav {
width: 100%;
overflow: hidden;
list-style: none;
display: inline;
}
#nav ul {
list-style: none;
overflow: hidden;
}
#nav ul li{
padding: none;
margin: none;
border: thin black dashed;
}
#nav li a {
background: #7b7b7b;
border-right: 1px solid #474747;
color: #fff;
display: block;
float: left;
font: 400 18px 'Iceland', Tahoma, Helvetica, Verdana, Arial, sans-serif;
padding: 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 14.1%;
-webkit-box-shadow: inset .5px .5px 15px .5px rgba(1, 1, 1, 0.5);
box-shadow: inset .5px .5px 15px .5px rgba(1, 1, 1, 0.5);
}
#nav li a:hover {
background: #bf0302;
}
nav li:last-child a {
border: none;
}
/* End of Navigation */
This is where the spacing is gone wrong.
(source: picturetrail.com)
The thin yellow border is the menu div and the red one is nav.

Answer 1

The problem is simple you are hadding an 1px border to the rigth of the NAV LI A, so you need to compensate for this.
So add this:
margin-rigth:-1px;
Final CSS:
#nav li a {
background: #7B7B7B;
border-right: 1px solid #474747;
color: white;
display: block;
float: left;
font: 400 18px 'Iceland', Tahoma, Helvetica, Verdana, Arial, sans-serif;
padding: 10px;
text-align: center;
text-decoration: none;
margin-right: -1px;
text-transform: uppercase;
width: 14.1%;
-webkit-box-shadow: inset .5px .5px 15px .5px rgba(1, 1, 1, 0.5);
box-shadow: inset .5px .5px 15px .5px rgba(1, 1, 1, 0.5);
}
Working DEMO | Final Result