Bootstrap - Vertical Radio Buttons not aligned - css

Question

Im having a problem stacking radio buttons once the screen size reaches a certain size (in this case, 768px for mobile phones). I have this local #media override that takes the radio-inline and displays it as a block - however, once I do this, the first Radio Button "0", is slightly offset and does not align with the rest below it. Any thoughts on a work around or if im doing something wrong?
<style>
#media (max-width: 768px){
.radio-inline{
display:block;
}
}
</style>
<div class="container-fluid">
<div class="jumbotron">
<div>
<asp:Label runat="server" CssClass="h3" ID="Header" Text="EXAMPLE
TEXT"/>
<br />
<br />
<asp:Label runat="server" CssClass="h3" id="S1W" Text="EX1" />
</div>
<div class="row" style="padding-bottom: 30px;">
<div class="col-lg-12">
<label class="radio-inline">
<input type="radio" name="A1" value="0" required> <b>0&nbsp
&nbsp</b>
</label>
<label class="radio-inline">
<input type="radio" name="A1" value="1" required> <b>1&nbsp
&nbsp</b>
</label>
<label class="radio-inline">
<input type="radio" name="A1" value="2" required>
<b>2&nbsp &nbsp</b>
</label>
</div>
</div>
</div>

Answer 1

You need to remove the spaces, "&nbsp", from each input. This should fix the issue as shown in this code snippet. If you need spacing, use CSS.
https://jsfiddle.net/tbuchanan/Lqj412tu/
<label class="radio-inline">
<input type="radio" name="A1" value="0" required> <b>0</b>
</label>