html - テキストと DIVS は Chrome を中心にしていますが、iPod は中心にしていませんか?

Question

ゴルフ計算機用の webApp を作成しています。iPod でテストすると、テキストと div タグが Chrome のように中央に配置されていないようです。ただし、入力タグと選択タグはそうです。これが私の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>

そして私の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;
}

他に提供できるものがあれば、お知らせください。ライブ テスト バージョンについては、ragstudio.com/handicapCalculator