How do solve left gap semantically in Media Queries menu - html

Question

I have a css issue with a media queries menu, I want the dropdown menu to be 100% width but there is a css issue on the left hand side of the menu showing a gap.
Any help would be great!!
please see fiddle here
http://jsfiddle.net/kavbE/
body {
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444;
font-size: 62.5%;
text-rendering: optimizeLegibility;
background: #fff;
}
li {
list-style: none;
}
a:link, a:visited {
color: #4083a9;
outline: none;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #205f82;
}
#header {
width: 100%;
height: 50px;
background: #333;
background: rgba(47, 47, 47, 0.98);
z-index: 9997;
}
#header-inner {
position: relative;
margin: 0 auto;
padding: 0 12px;
max-width: 970px;
}
#logo {
float: left;
padding: 0px 20px 0 0;
}
#logo a {
display: block;
width: 82px;
height: 50px;
background-repeat: no-repeat;
background-position: 0 50%;
background-image: url(../img/assets/chartego-logo.png);
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
#logo img {
height: 0;
}
#logo a:hover {
opacity: .6;
}
#nav {
margin: 0 0px 0 20px;
color: #777;
}
#nav>li {
float: left;
font-size: 1.25em;
line-height: 1;
}
#nav>li>a {
display: block;
height: 50px;
padding: 0 10px;
line-height: 50px;
text-decoration: none;
color: #999;
}
#nav>li#user-profile {
float: right;
}
#nav>li img {
float: right;
position: relative;
top:13px;
}
#nav li ul.tabs {
width: 180px;
padding: 0 0 10px 0;
background: #333;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-border-top-left-radius: 0;
-moz-border-radius-topleft: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
z-index: 999;
}
#nav li ul.tabs li a {
display: block;
padding: 5px 15px;
font-size: 12px;
font-weight: normal;
line-height: 2;
color: #999;
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#nav li ul.tabs li a:hover {
color: #ddd;
background: rgba(255, 255, 255, 0.1);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
#nav li:hover>a, #nav li>a:hover {
color: #ddd;
}
#nav li#user-profile ul.tabs li:first-child a {
font-weight: bold;
}
#toggle-nav {
display: none;
}
#nav li#user-profile span.profile-name {
display: none;
}
/* =============================================================================
NAVIGATION MEDIA MAX 800PX
========================================================================== */
#media screen and (max-width: 800px) {
#header {
position: fixed;
height: 40px;
}
#toggle-nav {
position: absolute;
top: 0;
left: 0px;
display: block;
width: 48px;
height: 40px;
text-indent: -9999px;
background-repeat: no-repeat;
background-position: 15px 50%;
background-image: url(../img/assets/icon-hamburger.png);
opacity: .5;
}
#logo a {
display: block;
height: 40px;
margin: 0 auto 0 auto;
}
#logo {
float: none;
padding-right: 0;
text-align: left;
}
#nav {
float: left;
width: 100%;
margin: 0 0 10px 0;
text-align: left;
}
#nav li {
position: relative;
float: none;
margin-right: 0;
text-align: left;
font-size: 12px;
background: rgba(47, 47, 47, 0.98);
}
#nav li ul.tabs {
display: block;
position: static;
float: none;
width: 100%;
left: 0;
margin: 0;
padding: 0;
background: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#nav li ul.tabs li a {
padding: 15px;
font-size: 12px;
font-weight: normal;
line-height: 1;
text-transform: none;
}
#nav li#user-profile {
float: none;
}
#nav li#user-profile img {
float: left;
margin: 0 8px 0 0;
}
#nav li#user-profile span.profile-name {
display: inline;
}
#nav li a:hover {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#nav li a:hover {
color: #fff;
}
#nav li ul.tabs li a:hover {
color: #999;
background: none;
}
#nav li#user-profile ul.tabs li:first-child {
display: none;
}
#header-inner {
width: auto;
padding: 0;
}
}

Answer 1

There's some browser-default padding on your #nav list.
Add padding: 0; to #nav and it should fix it.