Fixed Position with Horizontal Overflow on IPhone - ios

Question

http://jimjamdesigns.co.uk/online-portfolio/animals.html
(On Iphones only) For some reason the fixed elements of my website above stretch across to the end of the last overflow element instead of ignoring the overflow and treating the width of the device itself.
Stranger still, on the IPAD it works fine.
I've tried these viewport meta tags:
<meta name="viewport" content="width=568px, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0,">
And some others along these lines.
I have also trawled online for solutions and tried everyone but without success. Mostly the suggestions that says to use a different position that locks the entire site and disables the navigation to the overflow elements - which is obliviously undesirable.
Here is the elements in question:
<div id='back-nav'>
<a id='bk-to-start' href='j-a-allan-childrensbooks.html'>Back to the Start</a>
<a id='bk-to-sib' href='siblings.html'>Back to Animals</a>
</div>
<div id='main-nav-wrap'>
<ul id="ani-menu">
<li><a id='ani' class='scroll-hori' href="#animals">Animals Vol. 1</a></li>
<li><a id='ele' class='scroll-hori' href="#elle-wrap">Ellie the Acrobat Elephant</a></li>
<li><a id='rat' class='scroll-hori' href="#rat-wrap">The Runaway Rat</a></li>
<li><a id='vic' class='scroll-hori' href="#vic-wrap">Victor the Vegetarian Vulture</a></li>
</ul>
</div>
<div id="title"></div>
<h2 id='title2'>Written & Illustrated by James Allan</h2>
And CSS with Media Queries
media screen and (max-width: 736px) and (min-width: 568px)
#back-nav {
margin: 1% 0 0 3%;
z-index: 1002;
}
#back-nav {
width: 100%;
position: fixed;
z-index: 1002;
margin: 0.7% 0 0 5%;
#main-nav-wrap {
position: fixed;
width: 100%;
z-index: 999;
#media screen and (max-width: 736px) and (min-width: 568px)
#ani-menu {
width: 78%;
margin: 3.5% 0 0 5%;
}
#ani-menu {
width: 9%;
padding: 0;
margin: 4% 0 0 6%;
z-index: 1001;
}
#media screen and (max-width: 736px) and (min-width: 568px)
#title {
margin: 1% 0 0 27%;
width: 47%;
height: 25%;
}
#title {
background-image: url(../optimised/animals-title.jpg)!important;
background-size: 100% !important;
background-repeat: no-repeat !important;
z-index: 998;
margin: 1% 0 0 29%;
width: 42%;
height: 25%;
position: fixed;
}
#media screen and (max-width: 736px) and (min-width: 568px)
#title2 {
font-size: 11px;
margin: 5.5% 0% 0% 0%;
}
#title2 {
width: 100%;
text-align: center;
font-size: 1.3vw;
font-weight: 500;
margin: 4.5% 0% 0% 0%;
color: #000;
position: fixed;
z-index: 999;
}
If anyone can view this on an Iphone (I have only tested on Iphone 5) to see what is happening, any help stopping me from breaking some fundamental design ethics to depressingly act as a work around would be unfathomably appreciated...