title: checkboxes don't display properly on iphone (6)
body: <p>I have a web page that appears fine on a desktop in multiple browsers but doesn't display correctly on a Iphone (6).  On a Iphone (6) each checkbox is left aligned within the width.  On The desktop they are aligned in the center of the width.  Here is a link to <a href="https://jsfiddle.net/rss81/by36sx9o/2/" rel="nofollow">js fiddle example
  </a> </p>
  
  <p>HTML</p>
  
  <pre><code>        &lt;form id="reg_form" action="" method="post"&gt;
                &lt;legend&gt;Personal Data &lt;/legend&gt; 
                   &lt;h2&gt;Select days you would like to get invitations for&lt;/h2&gt;
                      &lt;div id = "error_place"&gt;&lt;/div&gt;
                      &lt;div&gt;
                         &lt;ul&gt;
                            &lt;li&gt;
                               &lt;label for= "M"&gt;M&lt;/label&gt;
                               &lt;input type="checkbox" name="M"  value="1" id="M" class="days_group form_group"&gt;  
                            &lt;/li&gt;
                            &lt;li&gt;
                               &lt;label for= "Tu"&gt;Tu&lt;/label&gt;
                               &lt;input type="checkbox" name="Tu" value="1" id="Tu" class="days_group form_group"&gt; 
                            &lt;/li&gt;
                            &lt;li&gt;
                               &lt;label for= "W"&gt;W&lt;/label&gt;
                               &lt;input type="checkbox" name="W"  value="1" id="W" class="days_group form_group"&gt;  
                            &lt;/li&gt;
                         &lt;/ul&gt;
                         &lt;ul&gt;
                            &lt;li&gt;
                               &lt;label for= "Th"&gt;Th&lt;/label&gt;
                               &lt;input type="checkbox" name="Th" value="1" id="Th" class="days_group form_group"&gt; 
                            &lt;/li&gt;
                            &lt;li&gt;
                               &lt;label for= "F"&gt;F&lt;/label&gt;
                               &lt;input type="checkbox" name="F"  value="1" id="F" class="days_group form_group"&gt;  
                            &lt;/li&gt;
                            &lt;li&gt;
                               &lt;label for= "Sa"&gt;Sa&lt;/label&gt;
                               &lt;input type="checkbox" name="Sa" value="1" id="Sa" class="days_group form_group"&gt; 
                            &lt;/li&gt;
                         &lt;/ul&gt;
                         &lt;ul&gt;
                            &lt;li&gt;
                               &lt;label for= "Su"&gt;Su&lt;/label&gt;
                               &lt;input type="checkbox" name="Su" value="1" id="Su" class="days_group form_group"&gt; 
                            &lt;/li&gt; 
                         &lt;/ul&gt;
  
                         &lt;button id="btnsubmit"  type="button"&gt;Submit&lt;/button&gt;
                         &lt;div id="spacer"&gt;&lt;/div&gt;
                         &lt;div class="next-back"&gt;
                            &lt;button type="button" class="next light"&gt;next&lt;/button&gt;                              
                            &lt;button type="button" class="back"&gt;back&lt;/button&gt;
                         &lt;/div&gt;
                      &lt;/div&gt;
                &lt;/fieldset&gt;   
          &lt;/form&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>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%;
  }
  </code></pre>