Responsive design problems

I’m using the theme on a set here cemmott.co.uk/test2 and it works fine, except on smaller screen sizes you are able to zoom out and scroll away from the main content area, screenshot from my iPhone :

and the relevant (I think) code in the style.css is

 /* We don't want to squash the content on mobile */
@media screen and (max-width: 782px) {
  body.display-main-menu #page,
  body.display-main-menu #masthead {
    padding-right: 0px;
  }
  body.display-main-menu #page > div,
  body.display-main-menu #page > section,
  body.display-main-menu #page > header {
    -webkit-transform: translateX(-280px);
    -moz-transform: translateX(-280px);
    -o-transform: translateX(-280px);
    -ms-transform: translateX(-280px);
    transform: translateX(-280px);
  }
} 

It’s a minor problem but something my client is concerned about, any ideas how to fix it?

URL: http://cemmott.co.uk/test2