Mobile rendering wont stretch 100%

Mobile rendering wont stretch 100%

Hello on my site I have a header/footer wrapper that goes 100% width, this
has a different bg image on it to the rest, however when i go to the site
on a mobile it only stretches 90% of the width, i'm in the process of
converting the site to a responsive grid system I recently developed so
the current version will only be live for a few more weeks however it's
something i would rather fix anyone know hats up?? URL: jp creative vision
CSS for the header
#header{
padding: 0;
height:60px;
width:100%;
background-image:url(../images/general/background_top.jpg);
-webkit-box-shadow: 0px 0px 50px 5px #000000;
-moz-box-shadow: 0px 0px 50px 5px #000000;
box-shadow: 0px 0px 50px 5px #000000;
}
#nav{
margin: 0 auto;
padding-top:0;
width:1000px;
}
#nav ul{
float:right;
}
#nav li {
display: inline-block;
}
#nav li a, #nav li a:visited {
box-sizing: border-box;
color:#FFFFFF;
display: block;
padding: .31em .60em;
transition: border 1s ease-in-out;
-moz-transition: border 1s ease-in-out;
-webkit-transition: border 1s ease-in-out;
}
#nav li a:hover, #nav li a:active, #nav li a:focus {
border-bottom: solid 10px #336699;
}
#nav ul:last-child{
margin-right:0px;
padding-right:0px;
}
Anyone know what my issue is? Thanks for the help :)