title: Checked radio buttons misaligned when using custom CSS
body: <p>I'm implementing some custom styles for radio buttons and am having problems trying to perfectly center the checked buttons. When I paste the exact same code into JS Fiddle, things work perfectly. Yet in my web app, they are each off centered (in their own way) like the image below, despite having the same classnames, positioning, etc:</p>
  
  <p>Image link: <a href="http://i.stack.imgur.com/euW86.png" rel="nofollow">Off-centered checked radio buttons</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="RadioStyled"&gt;
    &lt;label class="control-label"&gt;
      &lt;input
        class="form-control"
        type="radio"
        ref="check1"
      &gt;
      &lt;span class="radio-styled checked"&gt;&lt;/span&gt;
      &lt;span class="label-text"&gt;Australia&lt;/span&gt;
    &lt;/label&gt;
    &lt;div class="RadioStyled"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="RadioStyled"&gt;
    &lt;label class="control-label"&gt;
      &lt;input
        class="form-control"
        type="radio"
        ref="check2"
      &gt;
      &lt;span class="radio-styled checked"&gt;&lt;/span&gt;
      &lt;span class="label-text"&gt;Belgium&lt;/span&gt;
    &lt;/label&gt;
    &lt;div class="RadioStyled"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="RadioStyled"&gt;
    &lt;label class="control-label"&gt;
      &lt;input
        class="form-control"
        type="radio"
        ref="check3"
      &gt;
      &lt;span class="radio-styled checked"&gt;&lt;/span&gt;
      &lt;span class="label-text"&gt;United Kingdom&lt;/span&gt;
    &lt;/label&gt;
    &lt;div class="RadioStyled"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="some-other-element"&gt;
    &lt;div class="RadioStyled"&gt;
      &lt;label class="control-label"&gt;
        &lt;input
          class="form-control"
          type="radio"
          ref="check3"
        &gt;
        &lt;span class="radio-styled checked"&gt;&lt;/span&gt;
        &lt;span class="label-text"&gt;New Zealand&lt;/span&gt;
      &lt;/label&gt;
      &lt;div class="RadioStyled"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="RadioStyled"&gt;
      &lt;label class="control-label"&gt;
        &lt;input
          class="form-control"
          type="radio"
          ref="check3"
        &gt;
        &lt;span class="radio-styled checked"&gt;&lt;/span&gt;
        &lt;span class="label-text"&gt;Canada&lt;/span&gt;
      &lt;/label&gt;
      &lt;div class="RadioStyled"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS / SCSS:</p>
  
  <pre><code>.RadioStyled {
      display: inline-block;
      padding-right: 25px;
      label.control-label {
          cursor: pointer;
          display: block;
          line-height: 24px;
          .label-text {
              position: relative;
              font-size: 14px;
              color: black;
              padding-left: 6px;
              vertical-align: middle;
          }
          input[type="checkbox"], input[type="radio"] {
              display: none;
          }
          .radio-styled {
              border-radius: 50%;
              border: 1px solid grey;
              box-sizing: border-box;
              display: inline-block;
              height: 20px;
              vertical-align: middle;
              width: 20px;
          }
          .radio-styled.checked {
              border: 1px solid grey;
              background-color: green;
              border-radius: 50%;
              box-sizing: border-box;
              display: inline-block;
              width: 20px;
              height: 20px;
              vertical-align: middle;
          }
          .radio-styled.checked::before {
              background-color: white;
              border-radius: 50%;
              box-sizing: border-box;
              content: '';
              display: inline-block;
              height: 20px;
              width: 20px;
              // margin: -1px -1px;
              transform: scale(0.5);
              position: relative;
              top: -1px;
              right: 1px;
          }
      }
  }
  
  .some-other-element {
    padding-left: 250px;
    width: 400px;
  }
  </code></pre>
  
  <p><a href="http://codepen.io/davely/pen/grZWQP" rel="nofollow">Codepen here</a></p>
  
  <p>Any idea what's happening here that makes each checked radio button seem to have a different position? Thanks!</p>