How do I align Radio/Checkbox buttons with their labels?

#1

This is my first post on here and I am fairly new at coding, so sorry if I don’t give enough information or anything.

I am attempting to complete the survey project and have completed everything, however, the radio buttons/checkboxes inputs and their labels have a large gap between them. I have tried copying code from the original from FreeCodeCamp, looked it up online, and tried out different things but nothing has worked. I don’t know if the problem lies within the larger container div or if it is with the input coding itself.

It is most likely an easy solution but due to my inexperience, I am having a hard time finding a solution.

Here is the link to my pen: https://codepen.io/davcoding1/pen/jONeZvx?editors=1100
I have added comments to point out what I think is the code involved.

Thank you for your help.

#2

So after looking at your pen, here are some tips that I have for you that were helpful for me:

  • Try to avoid using both a CSS stylesheet and inline-styles (as you learn to create larger, more complex websites you’ll understand why it’s best practice to stick with CSS and avoid inline-styles)

  • I like to use border: solid on the pieces of my website that I need to work on/ improve, etc. This makes it easier for me to stay focused and understand why an element on my page is behaving in a particular way.

The problem seems to actually be inside of your info-input class. The width property is set to 38% and I think this ends up “crunching” the buttons with the labels, causing misalignment. Also, the vertical-align property shouldn’t be set to top because it causes a vertical misalignment between the buttons and the labels.

So get rid of width: 38%; and change vertical-align to baseline and should line them up!

#3

And I understand you’re new to coding so don’t sweat it! You’re doing great!

#4

Thank you so much for your help! Much appreciated!

#5