Survey Form - Build a Survey Form

Hi, I am absolutely struggling to get the checkbox values in the same line as the checkbox whilst also having different checkboxes and their respective values on the same line.

The css i have so far for this porblem:
display: block}



Thank you!

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head><link rel="stylesheet" href="styles.css"><head>
  <h1 id="title">freeCodeCamp Survey Form</h1>
<p id="description" class="description">Thank you for taking the time to help us improve the platform</p>
  <form id="survey-form">
  <!-- first field -->
    <label class="block" for="name" id="name-label" >Name<input class="block" id = "name" type="text" required placeholder="Enter your name"><label>
    <label class="block" for="email" id="email-label" >Email<input class="block"id= "email" type= "text" type="email" 
required placeholder="Enter your email"><label>
    <label class="block" for="age" id="age-label" >Age(optional)<input class="block" id="age" type="number" placeholder="Enter your age" ><label>    
<!-- second field-->
  <label class="block">Which option best describes your current role?<select class="block" id="dropdown">
    <option value ="">Select current role</option>
    <option value ="student">Student</option>
    <option value ="full-time-job">Full Time Job</option>
    <option value ="full-time-learner">Full Time Learner</option>
    <option value ="prefer-not-to-say">Prefer not to say</option>
    <option value ="other">Other</option>
<!--Third field -->
  <label class="block" ><input type="radio" id="definitely" name="recommendation" >Definitely</label>
<label class="block" ><input type="radio" id="maybe" name="recommendation" >Maybe</label>
  <label class="block"><input type="radio" id="not-sure" name="recommendation" >Not sure</label>
 <!--Fourth fieldset-->
    <p class="checkbox-title">What would you like to see improved. Check all that apply</p>
   <input value="front-end-projects" id="front-end-projects"  type="checkbox" ><label for="front-end-projects" >Front End Projects </label>

   <input id="back-end-projects"
><label class="right" for="back-end-projects">Back End Projects </label>

   <input value="data-visualisation" type="checkbox"><label  for="data-visualisation">Data visualisation </label>

   <input id="challenges" value="challenges" type="checkbox"
class"padding"><label for="challenges">Challenges </label>

   <input id="open-source-community" value="open-source-community" type="checkbox"><label for="open-source-community">Open Source Community </label>

<input id="glitter-help-rooms" value="glitter-help-rooms" type="checkbox"><label for="glitter-help-rooms">Glitter help rooms </label>

<input id="videos" value="videos" type="checkbox"><label for="videos">Videos</label>

<input id="city-meetups" value="city-meetups" type="checkbox"><label for="city-meetups">City meetups </label>

<label for="wiki">Wiki<input id="wiki" value="wiki" type="checkbox"></label>

<input id="forum" value="forum" type="checkbox"><label for="forum">Forum </label>

<input id="additional-courses" value="additional-courses" type="checkbox"><label for="additional-courses">Additional courses </label>
<!--Fifth fieldset-->
 <label for="bio">Any comments or suggestions
          <textarea id="comments-and-suggestions" name="comments-and-suggestions" rows="4" cols="40" placeholder="Enter your comment here..."></textarea>
 <input type="submit" value="Submit" />

/* file: styles.css */
body{ background-image: url(;
background-repeat: no-repeat;
background-size: cover;
font-family: sans-serif;
font-size: 25px

h1{font-size: 30px;}

font-size: 22px;

h1, .description{
font-family: palatino;
text-align: center;
margin: 0 auto;

form{background-color:rgba(55, 10, 97,0.8);
max-width: 450px;
min-width: 300px;
margin: 0 auto
display: block}



Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

I think you would make it a lot easier on yourself if you wrapped each label/input pair in a div. There is nothing wrong with using divs to help with styling. That’s exactly what they are for.

I just added the

and my problem was instantly solved, thank you so much.

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