iPhone is adding a top margin to image - iphone

Question

When checking my responsive site on my laptop it's scaling nicely using percentages, but when I check it on my iPhone it adds a huge top margin to my vertical row of images. Any ideas why? The site is here http://edharrisondesign.com/pocketpictograms/
Thanks in advance!
The HTML:
<!-- Pocket
================================================== -->
<figure>
<div class="main-pocket"><img src="images/assets/pocket.png"></div>
<div class="padding"></div>
</figure>
<!-- Icons
================================================== -->
<div class="inside-pocket">
<div class="icon-container">
<img class="pictogram" src="images/pocket-pics/pencil.png">
<img class="pictogram" src="images/pocket-pics/iphone.png">
<img class="pictogram" src="images/pocket-pics/earphones.png">
<img class="pictogram" src="images/pocket-pics/camera.png">
<img class="pictogram" src="images/pocket-pics/film.png">
<img class="pictogram" src="images/pocket-pics/scalpol.png">
<img class="pictogram" src="images/pocket-pics/paintbrush.png">
<img class="pictogram" src="images/pocket-pics/fineliner1.png">
<img class="pictogram" src="images/pocket-pics/fineliner2.png">
<img class="pictogram" src="images/pocket-pics/notepad.png">
<img class="pictogram" src="images/pocket-pics/mouse.png">
<img class="pictogram" src="images/pocket-pics/glasses.png">
<img class="pictogram" src="images/pocket-pics/lighter.png">
<img class="pictogram" src="images/pocket-pics/pipe.png">
<img class="pictogram" src="images/pocket-pics/flask.png">
<img class="pictogram" src="images/pocket-pics/matches.png">
<img class="pictogram" src="images/pocket-pics/watch.png">
<img class="pictogram" src="images/pocket-pics/pocket-watch.png">
<img class="pictogram" src="images/pocket-pics/key.png">
<img class="pictogram" src="images/pocket-pics/car-key.png">
</div>
</div>
The CSS:
figure {
z-index: 97;
position: fixed;
overflow: hidden;
width: 100%;
height: 100%;
top: 40%;
text-align: center;
}
.padding {
z-index: 95;
position: relative;
background-color: #D2D2D2;
height: 100%;
width: 100%;
top: -50px;
overflow: hidden;
border-bottom: 50px solid #D2D2D2;
}
.main-pocket img {
z-index: 96;
position: relative;
width: 30%;
height: auto;
margin: 0 auto;
max-width: 300px;
}
.inside-pocket {
width: 100%;
height: 100%;
position: absolute;
margin: 0 auto;
text-align: center;
}
.icon-container {
position: relative;
max-width: 300px;
width: 30%;
top: 37%;
margin: 0 auto;
}
.pictogram {
height: auto;
width: 100%;
margin-bottom: 200%;
}

Answer 1

Okay I know where I was going wrong - I should have been setting the top margin to the .inside-pocket class rather than the .icon-container class. The markup is here:
/* #Pocket
================================================== */
figure {
z-index: 97;
position: fixed;
overflow: hidden;
width: 100%;
height: 100%;
top: 40%;
text-align: center;
}
.padding {
z-index: 95;
position: relative;
background-color: #D2D2D2;
height: 100%;
width: 100%;
top: -50px;
overflow: hidden;
border-bottom: 50px solid #D2D2D2;
}
.main-pocket img {
z-index: 96;
position: relative;
width: 30%;
height: auto;
margin: 0 auto;
max-width: 300px;
}
.inside-pocket {
width: 100%;
height: 100%;
top: 37%;
position: absolute;
margin: 0 auto;
text-align: center;
}
.icon-container {
position: relative;
max-width: 300px;
width: 30%;
margin: 0 auto;
}
.pictogram {
height: auto;
width: 100%;
margin-bottom: 200%;
}
If anyone could let me know WHY this is correct it would be great! Cheers