I have a site at <http://michaelscottweb.com> which has 100% width containers and elements when the browser is above approx 450px. When you shrink the browser to below 980px and scroll to the right, there is a gap of around 20px on the body. This doesn't happen when you view the site above that resolution. Does anyone know what changes when to cause this?

![enter image description here](https://i.stack.imgur.com/8MvpJ.png)

css.

```
body {
    line-height: 1;
    overflow-x:hidden;
    max-width:100%;
    -moz-font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    background: #fff;
    color: #555;
    font-family: 'EBGaramondRegular';
    font-size: 15px;
    font-smoothing: antialiased;
    line-height: 1.5em;
    text-rendering: optimizeLegibility;
}

```