Hello everyone, I am currently diving into the world of CSS and HTML. My goal right now is to create a custom checkbox with a list of options. During my research, I stumbled upon an example on how to create custom checkboxes at this link. However, when implementing it, I encountered an issue where the div, span, and label elements were overlapping and not aligned properly.
Here is an image showing the problem: https://i.sstatic.net/hGkTt.png
I'm aware that I can probably fix this by adjusting the margin alignment on the label element. But I worry this might not be the most elegant solution, as it could affect the alignment on different screen resolutions. Even when trying to put the label inside the div element and applying properties to it, the span and label continue to overlap. Is there a more efficient way to address this issue? And why do the span and label elements keep overlapping in this scenario?