Custom CSS checkbox margin missing when viewed on mobile

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:

Any idea why the right margin vanishes when it is properly set in the CSS?

Custom checkbox CSS:

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;
}