How to fix responsive website to not let user scroll horizontally

Question

I have designed a responsive website but whenever I view the site when the display width is smaller than 510px wide eg. iPhone or shrinked browser the content works as it should and compresses to the width of the browser but there is a big white space to the right and the user and scroll horizontally.

I find this unusual as there is no media queries for 510px width, just 390px, 700px, 850px, 906px and 960px. Below is a screenshot of what is happening.

Thanks.

Answer 1

You need to remove width:500px; on <h1> elements.

see this FIDDLE