Text and DIVS centered on Chrome, but not iPod? - html

Question

I am creating a webApp for a golf calculator and when testing on my iPod, it seems the text and div tags are not centered like they are on Chrome. Then Inputs and Select tags however are. Here is my html/css
<header>
<h1>Simple Handicap Calculator</h1>
</header>
<section>
<input id="score1" class="score" type="tel" value="Score" onfocus="this.value = '';">
<input id="score2" class="score" type="tel" value="Score" onfocus="this.value = '';">
<input id="score3" class="score" type="tel" value="Score" onfocus="this.value = '';">
<div class="rating">Course</div>
<select id="courseRating" class="select"></select>
<div class="rating">Slope</div>
<select id="slopeRating" class="select"></select>
<div class="calculateButton" onclick="HandicapCalculator.CalculateHandicap();">Tap</div>
<div id="handicap">Handicap</div>
<div id="curtain"></div>
</section>
And then my css:
html {
font-size: 1em;
background: #825534;
color: #E6D4A7;
font-family: JosefinSlab;
}
header {
float: left;
width: 100%;
font-size: 32px;
text-align: center;
font-weight: bold;
text-shadow: 1px 1px 1px #36362C;
}
section {
float: left;
width: 100%;
}
section .score {
height: 38px;
width: 50%;
margin: 8px 25% 0 25%;
padding: none;
text-align: center;
font-size: 1.5em;
background: #5D917D;
box-shadow: 1px 1px 1px #36362C;
border: none;
-webkit-appearance: none;
-webkit-box-sizing: content-box;
}
section .rating {
float: left;
width: 50%;
margin: 8px 25% 0 25%;
font-size: 1.5em;
text-shadow: 1px 1px 1px #36362C;
text-align: center;
-webkit-appearance: none;
}
section .select {
float: left;
width: 50%;
margin: 8px 25% 0 25%;
padding: none;
background: #5D917D;
box-shadow: 1px 1px 1px #36362C;
font-size: 1.5em;
text-indent: 40%;
border: none;
-webkit-box-sizing: content-box;
}
section .calculateButton {
float: left;
height: 50px;
width: 50%;
margin: 8px 25% 0 25%;
background: #A8AD80;
box-shadow: 1px 1px 1px #36362C;
color: #36362C;
font-size: 2em;
line-height: 50px;
text-align: center;
-webkit-box-sizing: content-box;
}
section #curtain {
display: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #000;
opacity: .6;
}
section #handicap {
float: left;
height: 50px;
width: 70%;
margin: 8px 15% 0 15%;
background: #E6D4A7;
box-shadow: 1px 1px 1px #36362C;
color: #36362C;
font-size: 2em;
line-height: 50px;
text-align: center;
-webkit-box-sizing: content-box;
}
If there is anything else I can provide, just let me know. For a live testing version, ragstudio.com/handicapCalculator