Why on Earth is it doing this!?

Hey guys! Still working on building my Web Survey form for FreeCodeCamps projects (going slow because I want to understand what I am doing and how I am doing it). Anyway, I am wanting to line my radio buttons on top of each other, and I want the check boxes on the right side of the label - So I used the “float” tag in CSS. But now they are drifting oddly down and to the left. Any idea why this is happening?

Link to Code: https://codepen.io/brett-dykes/pen/LovPve

Edit: I meant “down and to the left” - not right

Edit: I meant checkboxes instead of radio buttonsweirdcopesnip

<div class="labels">
   <label id="radios" for="radiobuttons"><strong>Do you think I should invest in a bootcamp?</strong>
   </label>
   <input id="radioinput" type="radio" name="bootcamp" value="yes">Yes
   <input id="radioinput" type="radio" name="bootcamp" value="no">No
   <input id="radioinput" type="radio" name="bootcamp" value="Indifferent">Indifferent
</div>

Your question:
How do I make my radio buttons on the right side? ( after the text ).

Answer:
You’re current making a radio button 1st then making text 2nd. So you can do this one of two ways using flex-blox.

<div class="flex"><span>Yes</span><input type="radio"></div>
OR
<div class="flex-reverse"><input type="radio"><span>Yes</span></div>
.flex {
    display: flex;
    align-items: center;
}

.flex-reverse {
    display: flex;
    flex-flow: row-reverse;
    align-items: center;
}

Hi, thanks for your response! I’m actually referring to the radio buttons under this which I ask which language to focus on!

Will all this fix the issue of the radio buttons that are positioning oddly for the question “which language I should focus on”?

You said radio buttons., but you meant checkboxes. If someone doesn’t give you answer by end of the day., I’ll post. I’m on mobile now., so I can’t see what you have,. but the idea is still the same.

If you’re using label for… then your input should be inside your label.

Ok, well I fixed that, and nothing changed. Why does it NEED to be that way?

Ok I think I did everything you said, nothing really changed in the way of physical appearance. Is this what they mean when they say “semantic”?

You rock! Thank you. So “why” did the floats cause them to position so oddly?