Survey Form - Build a Survey Form

I’m trying out different designs for the survey. For the question ‘would you recommend codecamp’ I want the check boxes to be on the same line as the labels ‘yes’ ‘no’ ‘maybe’.
I gave ‘yes’ a class of inline and then in CSS I altered the margines for inline but nothing has happened to the layout.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8"/>
    <title>Free Code Camp Survey Form</title>
      <link href="styles.css" rel="stylesheet">
    <h1 id="title">Free Code Camp 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></input></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" placeholder="0" min="16" max="120" required>
        <label id="current-role">Which option best describes your current role?</label>
          <select id="dropdown">
           <option value="">Employed</option>
           <option value="1">Self-employed</option>
           <option value="2">Student</option>
           <option value="3">Other</option>
           <option value="4">Prefer not to say</option>
        <label>Would you recommend freeCodeCamp to a friend?</label>
        <label for="yes">
          <input class="inline" type="radio" name="recommendation" value="yes" id="yes"> yes
        <label for="no">
          <input type="radio" name="recommendation" value="no" id="no"> no
        <label for="maybe">
          <input type="radio" name="recommendation" value="maybe" id="maybe"> maybe
        <label>What is your favourite feature of freeCodeCamp?</label>
          <select id="dropdown">
           <option value="4">Projects</option>
           <option value="5">Challenges</option>
           <option value="6">Comunity</option>
           <option value="7">Open source</option>
        <label id="improvements">What would you like to see improved? (check all that apply)
          <input type="checkbox" value="front-end"> Front-end Projects
          <input type="checkbox" value="back-end"> Back-end Projects
          <input type="checkbox" value="data-visualization"> Data Visualization
          <input type="checkbox" value="challenges"> Challenges
          <input type="checkbox" value="open-source-community"> Open source Community
          <input type="checkbox" value="videos"> Videos
        <label>Any comments or suggestions?  
          <textarea name="comments"></textarea>
      <input  id="submit" type="submit" value="submit"></input>

/* file: styles.css */
body {
  width: 100%;
  height: 100vh;
  background-color: #333333;
  color: white;
  font-family: Tahoma;
  font-size: 18px;

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

label {
  display: block;}

h1, p {
  margin: 1em auto;
  text-align: center;
  max-width: 500px;
  min-width: 300px;
  width: 60vw

fieldset {
  border: 0;
  padding: 2rem;
  border-bottom: 3px solid #3b3b4f

fieldset: last-of-type {
  border-bottom: none;

input, textarea, select {
  width: 500px;
  margine-top: 10px;
  margine-bottom: 0px;
  margine-left: 0px;
  margine-right: 0px;
  width: 100%;

inline {
  width: unset;
  margine-right: 0.5em;
  margine-top: 0;
  margine-bottom: 0;
  margine-left: 0;
  vertical-align: middle; 

Your browser information:

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

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

Please add dot . infront of your inline CSS selector.

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