I need help to arrange my radio buttons. I used the text-align: center; but it moved the text only and the radio buttons remained on the left. How can I move them along with text in the center?
Here’s the link to my project: https://codepen.io/hasz/pen/mZqJjB
From
.opt {
left: -43px;
margin-left: 10px;
display: block;
}
Remove that 3 property to get next to text radio buttons.
1 Like
That solved my problem!
Can you explain it too?
Well display block make new line for checkbox what is you not need also left and margin-left make a huge space between the checkbox and the label name so you also no need that.
1 Like
Thanks! Got it. 
Now your radio input is inside a label which is inside an li which is by default display:block; which makes your .radio class unnecessary because of the #form-out styles.
Add *{border: red 2px solid;} to your CSS. See that box with no right side? It’s because you forgot to close your label. Also at the end the </div> is in the wrong place. The ids in the radio buttons are wrong and some of the input types are wrong.
What if you centered the last elements like this?
1 Like