I have been working with HTML to make some adjustments to a website. I recently got feedback to change the label of my checkbox, however, it is now overlapping with another checkbox. How can I resolve this issue?
<asp:CheckBox ID="crudAudit1" runat="server" TextAlign="Left" Text="<abbr title='Audit 1'>A1</abbr>" />
</label>
</span>
</div>
<div class="col-md-2 radioContainer">
<span style="white-space: nowrap;">
<label class="lblAudit2" id="lblAudit2" runat="server">
<asp:CheckBox ID="crudAudit2" runat="server" TextAlign="Left" Text="<abbr title='Audit 2'>A2</abbr>" />
</label>
</span>
</div>
<div class="col-md-2 radioContainer">
<span style="white-space: nowrap;">
<label class="lblDispatched" id="lblDispatched" runat="server">
<asp:CheckBox ID="crudisDispatched" runat="server" TextAlign="Left" Text="<abbr title='Disptached'>DIS</abbr>" />
</label>
</span>
</div>
<div class="col-md-2 radioContainer">
<span style="white-space: nowrap;">
<label class="lblScheduled" id="lblScheduled" runat="server">
<asp:CheckBox ID="crudisScheduled" runat="server" TextAlign="Left" Text="<abbr title='Scheduled'>DEL SCH</abbr>" />
</label>
</span>
</div>
<div class="col-md-2 radioContainer">
<span>
<label class="lblFinal" id="lblFinal" runat="server">
<asp:CheckBox ID="crudisFinal" runat="server" TextAlign="Left" Text="<abbr title='Final'>FNL</abbr>" />
</label>
</span>
</div>
After implementing this code, the checkboxes are displaying as follows on the website:
Screenshot showing how the checkboxes (DEL SCH) are overlapping with (FNL)