mobile device only shows 80% of page's width - html

Question

I uploaded a responsive site I did for a friend that does not render full width on the Index Page whether viewed on a smartphone or tablet.
The lady is doing me a favor as I try to get my name and work known. She has a business she'd like to see grow and we thought the Internet the place to start.
The odd thing is that site's other pages render just fine with proper width and height.
This leads me to believe the problem is with the "#media screen" queries.
I believed the CSS "width" and other properites and values in the full width, non-mobile page's code, would "cascade" down into the smaller mobile queries but added the properties "head," "html, body" and "footer" sections to see if that would improve the situation.
It did not.
The site can be viewed here: www.notaryonwheelsshaver.com
The CSS can be read here: http://www.notaryonwheelsshaver.com/css/nows.css
Any help would be greatly appreciated.

Answer 1

Your first media query (780px) has a typo in html,body -> height: 100%x; That may be interfering with the min-width attribute under it.
I don't know if that will fix it, but it's what I noticed.

Answer 2

I think the issue is in your CSS file:
html, body {
font-family: Tahoma, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 26px;
background-color: #FFF;
color: #555;
padding: 0;
margin: 0;
height: 100%;
/*width: 100%;*/
}
/*width: 100%;*/ is commented out which makes the browser skip the code try changing it to:
html, body {
font-family: Tahoma, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 26px;
background-color: #FFF;
color: #555;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
EDIT: You have the width also commented in:
.wrapper {
/*min-width: 100%;*/
min-height: 100%;
}