Responsive CSS overflow issue

Question

I have a responsive site that is somehow having a strange overflow area/issues that shouldn't be happening. It is going to need a real expert set of eyes to find the issue, I'm stumped.

The html, body, and body #wrapper widths are all set based on device size, and their overflow-x is set to hidden so there should be NO OVERFLOW area at all, yet it persists as a brown area to the right side of the narrow page designs.

In iOS they display at the proper zoom, but you can scroll right into the brown overflow area.

On Android devices the pages start really zoomed out and include the brown overflow area.

I cannot for the life of me figure out what is causing this overflow area as the width and max-width are explicitly set and overflow-x is set to hidden so nothing should extend past the page container.

The site can be viewed at http://gowestyoungmom.com/.

Answer 1

Change this part of your css(responsive.css line 175)

@media only screen and (max-device-width: 360px) and (min-device-width: 331px)
html, html body, body #wrapper 
{
    width: 330px !important;
    min-width: 320px !important;
    max-width: 360px !important;
    overflow-x: hidden;
}

and replace with this

@media only screen and (max-device-width: 360px) and (min-device-width: 331px)
html, html body, body #wrapper {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow-x: hidden;
}