Problem with my checkbox and radio buttons on survey form

I don’t understand why my checkboxes and radio buttons are not BEFORE their label on the web form and I don’t understand why I can’t align them.
Basically it doesn’t look like the exemple.

Thank you !

   **Your code so far**
/* file: index.html */
<!DOCTYPE html>
 <title>Survey Form</title>
 <Link rel='stylesheet' href='styles.css'>
 <h1 id='title'>freeCodeCamp Survey Form</h1>
 <p id='description'>Thank you for taking the time to help us improve the platform</p>
<form id='survey-form'> 
   <label id='name-label'> Name <input id='name' type='text' placeholder='Enter your name' required/></label>
   <label id='email-label'> Email <input id='email' type='email' placeholder='Enter your email' required/></label>
   <label id='number-label'> Age <input id='number' type='number' min="13" max="120" placeholder='Enter your age' required/></label>

   <label> Which option best describes your current role? <select id='dropdown'> 
       <option> Select current role </option>
       <option> Student </option>
  Would you recommend freeCodeCamp to a friend?
   <input type='radio' name='recommend' value='0' class='input-radio'/> Definitely </label>
     <input type='radio' name='recommend' class='inline' value='4'/> Maybe </label>
    <input type='radio' name='recommend' class='inline' value='5'/> Not sure </label>

  <label>  What would you like to see improved? (Check all that apply) </label>
<label><input type='checkbox' value='1' name='improve'> front end </input></label>
<label><input type='checkbox' value='2' name='improve'> backend </input></label>
<label><input type='checkbox' value='3' name='improve'> fullstack </input></label>

 Any comments or suggestions?
 <textarea placeholder="Enter your comment here"></textarea>
<input type='submit' class="submit" id="submit"></input>

/* file: styles.css */
 background-image: url(;

text-align: center;
color: white;

text-align: center;
color: white

background-color: rgba(30,23,76, 0.9);
color: white;
width: 60vw;
margin: auto;
padding-right: 2rem;
padding-left: 2rem;
padding-bottom: 2rem;
padding-top: 1rem;
max-width: 500px;
min-width: 300px;

 padding:  0;
 border: none;
 margin: 15 2; 

label {
 display: block;
 margin: 1rem 0;

input, textarea, select {
width: 100%;
margin: 6px 0;
background-color: 12A24A;
color : white;
height: 35px;

 height: 70px; 

.input-checkbox {
 display: inline-block;
 margin-right: 0.625rem;


   **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.84 Safari/537.36 OPR/85.0.4341.75

Challenge: Build a Survey Form

Link to the challenge:

you wrapped all inputs in one label and after each input u added an extra closing tag for label. try making 3 labels and inside each label an input then the text like this:

<label> <input type="radio"> Yes </label>

Why you made a closing tag for your input elements here?
its a self-closing element which is written like this:
<input />
but label isnt self closing so we add closing tag like this:
<label> </label>

remove the closing tag and make ur input a self-closing element
<label><input type='checkbox' value='1' name='improve' /> front end </label>

It’s not changing anything :frowning:

just checked your css

all the inputs with type radio and checkbox u need to unset their width. since u made the width 100%

since they have 100% width they will be pushed to the next line.
now make only the inputs required to have unset width
you can do that by creating inline class

  width: unset;

and then add this class to the inputs type radio and checkbox or u can target them this way

  width: unset;

that will target all ur inputs that has type=“radio” in them

amazing, you’re a life saver
thank you

1 Like

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