title: Custom CSS checkbox margin missing when viewed on mobile
body: <p>I have a custom checkbox written in CSS that looks as expected in development. But when it is viewed on mobile (via Heroku), the right margin does not show up, as can be seen here:</p>
  
  <p><a href="https://i.stack.imgur.com/XgdIx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XgdIx.png" alt="enter image description here"></a></p>
  
  <p>Any idea why the right margin vanishes when it is properly set in the CSS?</p>
  
  <p>Custom checkbox CSS:</p>
  
  <pre><code>input[type="checkbox"],
  .checkbox input[type="checkbox"],
  .checkbox-inline input[type="checkbox"] {
    position: relative;
    border: none;
    margin-bottom: -4px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
  }
  input[type="checkbox"]:focus,
  .checkbox input[type="checkbox"]:focus,
  .checkbox-inline input[type="checkbox"]:focus {
    outline: none;
  }
  input[type="checkbox"]:after,
  .checkbox input[type="checkbox"]:after,
  .checkbox-inline input[type="checkbox"]:after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    margin-top: -2px;
    margin-right: 1rem;
    border: 2px solid #8D8D8D;
    border-radius: 4px;
    -webkit-transition: 240ms;
    -o-transition: 240ms;
    transition: 240ms;
  }
  input[type="checkbox"]:checked:before,
  .checkbox input[type="checkbox"]:checked:before,
  .checkbox-inline input[type="checkbox"]:checked:before {
    content: "";
    position: absolute;
    top: 0;
    left: 6px;
    display: table;
    width: 6px;
    height: 12px;
    border: 2px solid #fff;
    border-top-width: 0;
    border-left-width: 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  input[type="checkbox"]:checked:after,
  .checkbox input[type="checkbox"]:checked:after,
  .checkbox-inline input[type="checkbox"]:checked:after {
    background-color: #00B1FF;
    border-color: #00B1FF;
  }
  input[type="checkbox"]:disabled:after,
  .checkbox input[type="checkbox"]:disabled:after,
  .checkbox-inline input[type="checkbox"]:disabled:after {
    border-color: #DFDFDF;
  }
  input[type="checkbox"]:disabled:checked:after,
  .checkbox input[type="checkbox"]:disabled:checked:after,
  .checkbox-inline input[type="checkbox"]:disabled:checked:after {
    background-color: #DFDFDF;
    border-color: transparent;
  }
  .has-warning input:not([type=checkbox]),
  .has-warning .form-control,
  .has-warning input.form-control[readonly],
  .has-warning input[type=text][readonly],
  .has-warning [type=text].form-control[readonly],
  .has-warning input:not([type=checkbox]):focus,
  .has-warning .form-control:focus {
    border-bottom: none;
    -webkit-box-shadow: inset 0 -2px 0 #FFD200;
    box-shadow: inset 0 -2px 0 #FFD200;
  }
  .has-error input:not([type=checkbox]),
  .has-error .form-control,
  .has-error input.form-control[readonly],
  .has-error input[type=text][readonly],
  .has-error [type=text].form-control[readonly],
  .has-error input:not([type=checkbox]):focus,
  .has-error .form-control:focus {
    border-bottom: none;
    -webkit-box-shadow: inset 0 -2px 0 #FF193C;
    box-shadow: inset 0 -2px 0 #FF193C;
  }
  .has-success input:not([type=checkbox]),
  .has-success .form-control,
  .has-success input.form-control[readonly],
  .has-success input[type=text][readonly],
  .has-success [type=text].form-control[readonly],
  .has-success input:not([type=checkbox]):focus,
  .has-success .form-control:focus {
    border-bottom: none;
    -webkit-box-shadow: inset 0 -2px 0 #00FFD2;
    box-shadow: inset 0 -2px 0 #00FFD2;
  }
  .has-warning .input-group-addon,
  .has-error .input-group-addon,
  .has-success .input-group-addon {
    color: #F8F8F8;
    border-color: transparent;
    background-color: transparent;
  }
  </code></pre>