Bootstrap CSS - Awesome Bootstrap Checkboxes are running out of display and cannot be checked

I have a table that has the style of: overflow-x: auto with checkboxes in it.

I'm using the bootstrap checkbox styles for these checkboxes to look prettier.

However, I noticed that zooming in/leaving the display of checkboxes, they cannot be checked nor unchecked.

Please refer to the screenshot below:

From the browser's inspect element, it can be seen that the 'real' checkbox is actually outside of its view.

Hence, clicking on the blue box with white tick doesn't do anything, however clicking on the 'ghost' box on the right actually checks/unchecks the checkbox.

My checkbox style is as below:

<div class="checkbox checkbox-primary checkbox-single mt-2">
   <asp:CheckBox ID="ChkDefault" runat="server"></asp:CheckBox>
   <label></label>
</div>