使用自定义CSS时，选中的单选按钮未对齐

Question

我正在为单选按钮实现一些自定义样式，并且在尝试将选中按钮完美居中时遇到问题。当我将完全相同的代码粘贴到JS Fiddle时，事情就完美了。然而，在我的网络应用程序中，尽管具有相同的类名，定位等，但它们都像下图一样偏离中心（以他们自己的方式）：

图片链接：Off-centered checked radio buttons

HTML：

<div class="RadioStyled">
  <label class="control-label">
    <input
      class="form-control"
      type="radio"
      ref="check1"
    >
    <span class="radio-styled checked"></span>
    <span class="label-text">Australia</span>
  </label>
  <div class="RadioStyled">
  </div>
</div>

<div class="RadioStyled">
  <label class="control-label">
    <input
      class="form-control"
      type="radio"
      ref="check2"
    >
    <span class="radio-styled checked"></span>
    <span class="label-text">Belgium</span>
  </label>
  <div class="RadioStyled">
  </div>
</div>

<div class="RadioStyled">
  <label class="control-label">
    <input
      class="form-control"
      type="radio"
      ref="check3"
    >
    <span class="radio-styled checked"></span>
    <span class="label-text">United Kingdom</span>
  </label>
  <div class="RadioStyled">
  </div>
</div>

<div class="some-other-element">
  <div class="RadioStyled">
    <label class="control-label">
      <input
        class="form-control"
        type="radio"
        ref="check3"
      >
      <span class="radio-styled checked"></span>
      <span class="label-text">New Zealand</span>
    </label>
    <div class="RadioStyled">
    </div>
  </div>

  <div class="RadioStyled">
    <label class="control-label">
      <input
        class="form-control"
        type="radio"
        ref="check3"
      >
      <span class="radio-styled checked"></span>
      <span class="label-text">Canada</span>
    </label>
    <div class="RadioStyled">
    </div>
  </div>

</div>

CSS / SCSS：

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

Codepen here

知道这里发生的事情会使每个选中的单选按钮看起来有不同的位置吗？谢谢！