Why do these two radio buttons not have the same horizontal alignment?

HTML-CSS
1

I don’t see any reason for the second <input type='radio"> to be aligned any differently from the first, but it is relatively shifted to the right. What is the difference between the two?

2

try this:
(ps. I had to use backticks to show you the changes, not sure if there is a better way in the forum to display html without the forum interpreting it, so be careful if you’re cutting and pasting to watch out for those)

in your CSS, change .radioStuff as below and add new .radioRightSide to separate the CSS for the radio buttons from the rest.
#code block
.radioStuff { white-space: nowrap; display: inline; /*float:left;*/ } .radioRightSide { text-align: left; display: inline-block; }
And in your html (I removed some stuff just to simplify, you can try adding things back slowly, to see how they affect the flow).
#code block

<div class='radioRightSide'> <label for="one" class='radioStuff'> <input type="radio" id="one" name="radioBTN" value="1" class='radioButton'/> First button </label> <label for='two' class='radioStuff'><br><input type='radio' id='two' name='radioBTN' value='2' class='radioButton'>Second button</label>
</div>

I’m not a CSS expert, so I hope this helps in some way.