Checked radio buttons misaligned when using custom CSS - css

Question

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:
Image link: 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
Any idea what's happening here that makes each checked radio button seem to have a different position? Thanks!