Survey Form - Build a Survey Form

Tell us what’s happening:
Hi all, I just completed the survey from project. I want to be able to go back and adjust my CSS on the project. Is there a way that i can come back to this and play around if i submit and move onto the next challenge?

Also, How can i get my radio and check box’s on the same line as my labels as well as closer to the label without? thanks for the guidance!!

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title> Buena Onda Surf Camp Survey</title>
    <link rel="stylesheet" href="styles.css">
    <h1 id="title"> Buena Onda Surf camp Survey</h1>
    <p id="description"> Thanks for taking the time to help us improve!</p> 
  <form id="survey-form">
      <label for="name" id="name-label"> Name <input id="name" type="text" required placeholder="Enter Your Name">
      <label for="email" id="email-label"> Email <input id="email" type="email" required placeholder="Enter Your Email">
      <label for="number" id="number-label"> Age <input id="number" type="number" required min="11" max="120"      placeholder="Enter Your Age">
      <label for="current-level" id="current-level-label">Which option best describes your current level?
        <select id="dropdown" name="dropdown">
          <option value="current-level">(Select Current Level)</option>
          <option value="1">I rode the white water</option>
          <option value="2">I rode a green wave</option>
          <option value="3">I caught many green waves</option>
          <option value="4">I can cut back and bottom turn</option>
          <option value="5">I get barreled</option>
      <label>Would you Recommend Buena Onda Surf Camp to a friend?</label> 
      <label for="definitely"><input id="definitely" name="recommend" value="definitely" type="radio"> Definitely</label>
      <label for="maybe"><input id="maybe" type="radio" value="maybe" name="recommend"> Maybe</label>
      <label for="not-sure"><input id="not-sure" type="radio" value="not-sure" name="recommend"> Not Sure</label>
      <label for="no-way-jose"><input id="no-way-jose" type="radio" value="no-way-jose" name="recommend">No Way Jose!
      <label for="favorite-feature" id="favorite-feature-label">What was your favorite thing about our camp? (select an option/s)</label>
        <select id="dropdown" name="dropdown">
          <option value="favorite-feature">(Select Favorite Feature)</option>
          <option value="1">Accomodations</option>
          <option value="2">Food</option>
          <option value="3">Surf Instructors</option>
          <option value="4">Surf Excursions</option>
          <option value="5">Other Activities</option>
      <label>What would you like to see improved? (check all that apply)</label>
      <label for="food"><input type="checkbox" value="food" name="food" id="food">Food</label>
      <label for="accomodations"><input type="checkbox" value="accomodations" name="accomodations"    id="accomodations">Accomodations</label>
      <label for="surf-instruction"><input type="checkbox" value="surf-instruction" name="surf-instruction" id="surf-instruction">Surf Instruction</label>
      <label for="comments">Any Comments or Suggestions?</label>
      <textarea id="comments" name="comments" placeholder="Enter your comments here"></textarea>
    <button type="submit" id="submit"> Submit</button>
/* file: styles.css */
/* file: styles.css */
body {
 width: 100%;
 background:  rgba(192, 47, 47, 0.079);
 height: 100vh;
 margin: 10px;
 color: #423c3c;
 font-family: Tahoma, sans-serif;

h1, p {
 color: rgb(193, 58, 58);
 margin: 20px 10px;
 text-align: center;

form {
 width: 80vw;
 max-width: 500px;
	min-width: 300px;
 margin: 0 auto;
 padding-bottom: 1em;
 background: rgba(192, 47, 47, 0.079)

fieldset {
 border: none;
 padding: 2 rem 0;

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

select {
 margin: 10px 0 0 0;
	width: 100%;
 min-height: 2em;

.inline {
 width: unset;
 margin: 0 0.5em 0 0;
 vertical-align: middle;

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:103.0) Gecko/20100101 Firefox/103.0

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

Yes you can still edit the code later, you can also keep a separate copy in your device.

You gave the input a width of 100% which is causing the radio/checkbox to be on a different line.

You also forgot to close the above css selector

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