My site is not displaying correctly on iphone5 and 4s.

The url is: http://www.mya.co.uk/nonsurgicaldev/index.html and I've attached my html and css.

The content does not fit the screen width when the phone is in portrait view and in both landscape and portrait view there is a large margin on the left hand side and none on the right.

I have a form on the page and had hidden the original checkboxes like this:

:root input[type=checkbox] {
position: absolute;
left: -6em;
}

and I thought it might have something to do with this, but I removed the checkbox replacement css and I still have the problem.

I have included:

<meta name="viewport" content="width=320" />
<script>
if (screen.width > 740) {
var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=740');
}
</script>

in my head tags.

Can anybody help me with this issue please? Would be much appreciated.