checkboxes не отображаются должным образом на iphone (6)

Question

У меня есть веб-страница, которая отлично отображается на рабочем столе в нескольких браузерах, но не отображается правильно на Iphone (6). На Iphone (6) каждый флажок выровнен по ширине. На рабочем столе они выровнены по центру ширины. Вот ссылка на js fiddle example

HTML

 <form id="reg_form" action="" method="post"> 
       <legend>Personal Data </legend> 
       <h2>Select days you would like to get invitations for</h2> 
        <div id = "error_place"></div> 
        <div> 
         <ul> 
          <li> 
          <label for= "M">M</label> 
          <input type="checkbox" name="M" value="1" id="M" class="days_group form_group"> 
          </li> 
          <li> 
          <label for= "Tu">Tu</label> 
          <input type="checkbox" name="Tu" value="1" id="Tu" class="days_group form_group"> 
          </li> 
          <li> 
          <label for= "W">W</label> 
          <input type="checkbox" name="W" value="1" id="W" class="days_group form_group"> 
          </li> 
         </ul> 
         <ul> 
          <li> 
          <label for= "Th">Th</label> 
          <input type="checkbox" name="Th" value="1" id="Th" class="days_group form_group"> 
          </li> 
          <li> 
          <label for= "F">F</label> 
          <input type="checkbox" name="F" value="1" id="F" class="days_group form_group"> 
          </li> 
          <li> 
          <label for= "Sa">Sa</label> 
          <input type="checkbox" name="Sa" value="1" id="Sa" class="days_group form_group"> 
          </li> 
         </ul> 
         <ul> 
          <li> 
          <label for= "Su">Su</label> 
          <input type="checkbox" name="Su" value="1" id="Su" class="days_group form_group"> 
          </li> 
         </ul> 

         <button id="btnsubmit" type="button">Submit</button> 
         <div id="spacer"></div> 
         <div class="next-back"> 
          <button type="button" class="next light">next</button>        
          <button type="button" class="back">back</button> 
         </div> 
        </div> 
       </fieldset> 
     </form> 

CSS

input { 
    display: block; 
    text-align: center; 
    margin: 0 auto; 
    margin-top: 5%; 
    height: 5vw; 
    width: 65%; 
} 



.next, .back { 
    width: 25%; 
    font-weight:bold; 
} 

.next{ 
    float:left; 
    display:block; 
} 
#btnsubmit{ 
    clear: both; 
    margin:0 auto; 
    margin-top: 15%; 
    display:block; 
    width:25%; 
    text-align: center; 
} 
.back { 
    float:right; 
} 

.next-back{ 
    margin:0 auto; 
    width: 65%; 
} 

.light{ 
    color: white; 
    background-color:lightgray; 
} 

#spacer{ 
    height: 5vw;  
    clear:both; 
} 

ul{ 
    list-style-type: none; 
    width: 100%; 
    text-align:center; 
    padding:0; 
} 

li{ 
    display:inline-block; 
    width:30%; 
} 

h2{ 
    text-align:center; 
    margin-bottom:10%; 
} 

Answer 1

Отсоединение width свойство от input центров флажок в обоих контекстах.

input { 
    ... 
    w̶i̶d̶t̶h̶:̶ ̶6̶5̶%̶;̶ 
} 

Chrome/Mac

IOS Safari