There seems to be an issue with the alignment of Bootstrap 4 custom radio buttons and my left padding.
Here is a snippet:
https://i.sstatic.net/vWTNo.png
This is part of the code for displaying an item
<div class="p-4">
<ul class="d-flex flex-column justify-content-between">
<!-- Option One -->
<li class="w-100 side">
<div class="d-flex pl-0 custom-control custom-radio align-content-start">
<div class="pt-3 pb-3 mr-2">
<input id="option-1" type="radio" class="position-relative custom-control-input">
<label for="option-1" class="custom-control-label">
<span>Option One</span>
</label>
</div>
</div>
</li>
Link to full example on CodePen:
https://codepen.io/Edon123/pen/LYPNbVv?editors=1100
How can I ensure that the bootstrap input elements align properly with the padding?
Edit: The main issue here is that the radio buttons do not seem to adhere to the specified padding. I would like them to be pushed accordingly by the padding.