How to better align checkboxes and radio buttons

Hi all, just completed the first project for this certification.
I am however, not satisfied with how the text of the checkboxes and radio buttons is aligned in the form.
ideally I would like the text of each check box to be next to the checkbox (not below it).
The same goes for the radio buttons.
Any ideas on how I may go about fixing this?
Here is the link to my code:

and here is what the form looks like currently:

  **Your browser information:**

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:91.0) Gecko/20100101 Firefox/91.0

Challenge: Step 4

Link to the challenge:

As far as I see it, width of all your inputs is 100%.
Do you have any CSS selectors for radios and checkboxes to make them not to be alone on the line.
Is that your concern or I misunderstood?

I would like each radio and checkbox to be alone on its own line, but I would like the text associated with each radio and checkbox to be right next to the radio or the text-box.

You wanna on one line:

  1. one checkbox/radio
  2. text associated with this one checkbox/radio
    Am i correct?

yes, that is correct!

So right now width of ALL your inputs is 100%.
How something will fit on the one line with the checkbox(even text!) if this checkbox is greedy and takes all the width?
You wanna take a look at property width, I would say at

width: unset

Think how to give appropriate width for radios/checkboxes, what selectors do you need?

This theme is covered in that part of curriculum where you need to build Registration Form. I suppose you’ve done this?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.