When the screen size reaches 768px for mobile phones, I am experiencing an issue with stacking radio buttons. I have a local @media override that sets the radio-inline display to block, but it causes the first Radio Button "0" to be slightly offset and not align with the rest below it. Any suggestions for a workaround or if there is something wrong with my approach?
<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 
 </b>
</label>
<label class="radio-inline">
<input type="radio" name="A1" value="1" required> <b>1 
 </b>
</label>
<label class="radio-inline">
<input type="radio" name="A1" value="2" required>
<b>2   </b>
</label>
</div>
</div>
</div>