Need help on 4Survey form

Tell us what’s happening:
I’ve complete the challenge of “Survey Form” but I’m not satisfy with the final result.
1.I don’t know how to align the text with the boxes
2.I don’t know how to reduce spaces between the text and boxes that must be completed
3.Depending on the screen that i look the form boxes are different size
4.I think that my survey is a little bit disorganized in comparison with the the freecodecamp example, a few advices would be awesome how to be more organised

Your code so far
https://codepen.io/andreiples/pen/BaNzQaz

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/82.0.4062.0 Safari/537.36.

Challenge: Build a Survey Form

Link to the challenge:

Welcome to the forums @AndreiPles.
Your form has a lot of typo’s. Some things to do;

  • Run your code through the W3C validator. Just copy your HTML and paste it into the ‘Validate by Direct Input’ tab and clean up all the errors. Do this before you try styling anything.
    • As an aside, codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
  • Do yourself a favor and think about using the fieldset element to group your radio buttons and checkboxes.
    https://www.w3schools.com/tags/tag_fieldset.asp

Some additional hints;

  • don’t use the <br> element to force spacing. Use margin and/or padding in CSS
  • think about using something other than pixels to size everything. On smaller screens your form falls apart. (Think percentages and/or em units)
  • review the lesson on nesting radio buttons and checkboxes in the <label> element