Radio button alignment in FCC Build a Survey Form

I need a little bit of help with this project, I’m trying to align my radio buttons next to eachother but their position is based off how many characters are in the labels. I’ve tried a couple of things and its gotten me nowhere, I also might have alot of useless css so beware lol. If someone could help me out, that would be great! Thanks!

https://codepen.io/tropicaltaquito/pen/gOPeLJE

Hello and welcome to the FCC community~!

I currently see this:

Are you trying to get this?
image

I’m trying to get it like the second image, but aligned. I might have excess css for sibling and parent divs that might be causing this issue.

The changes I made to get the second image were to remove the <br> between the buttons, and remove the vertical-align from the CSS.

As an aside, you should not use <br> to force spacing as it is an accessibility issue. :slight_smile:

I’m still getting the same issue with that suggestion. The radio buttons arent the same distance away from the label text. I’ve messed around with some of the padding and margins in parent and sibling divs and I just cant seem to get it.

Screen Shot 2020-07-09 at 8.53.24 PM