Survey Form - Build a Survey Form

Tell us what’s happening:
The only thing I’m missing is the descendant part. No matter where I move my divs I’ve been stuck on this part for almost 2 days now!!! What do i DO?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Sleep Schedule Survey</title>
    <link rel="stylesheet" href="styles.css">
  <h1 id="title">Sleep Schedule Survey</h1>
  <p id="description">Please fill out this survey so we can get to know a little more about you!</p>
  <form id="survey-form" method="post">
    <div class="survey-form"
     <label id="name-label"> Enter your Name: <input id="name" type="text" placeholder="First and Last Name" required></label>
  <label id="email-label"> Enter your Email: <input id="email" type="email" placeholder="Email" required></label>
  <label id="number-label"> How many hours of sleep do you average? <input id="number" type="number" min="1" max="24" placeholder="Hours" required ></label>

<label for="dropdown">How did you hear about us?  <div>  <select id="dropdown">
  <option value="">(select one)</option>
  <option value="1">SleepSchedule Website</option>
  <option value="2">SleepSchedule YouTube</option>
  <option value="3">From a Friend
  <label>Which Type of Pillow Do You Prefer?</label>
<label><input type="radio" class="inline" name="pillow"> Memory Foam</label>
<label><input type="radio" class="inline" name="pillow"> Molded Latex Pillow</label>
<label>At What Temperature Do You Sleep Best? (check both if applicable)</label>
<label><input type="checkbox" class="inline"> Cool/Sometimes Turning on The Fan</label>
<label><input type="checkbox" class="inline"> I like the room hot</label>
<label for="additional"> Anything else you'd like us to know? <textarea id="additional" rows="3" cols="30" placeholder="Please leave us any additional comments here..."></textarea>
<hr class="survey-form">
<input id="submit" type="submit"> 
   </form>  </body>
/* file: styles.css */
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  color: #404F3B;
  font-family: monospace;
  font-size: 13px;
  background-image: linear-gradient( 115deg, rgba(157, 193, 131), rgba(79, 121, 66, 0.7) ) , url(;
  background-size: cover; background-position: center;

h1, p {
  margin: 1em auto;
  text-align: center;


form {
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding-bottom: 2em;

fieldset {
  border: none;
  padding: 2rem 0;
  border-bottom: 3px solid #404F3B;

  display: block; 
  margin: 0.5rem 0;

select {
  margin: 10px 0 0 0;
  width: 100%;

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

input, textarea {
  background-color: #9dc183;
  border: 1px solid green;
  color: #ffffff;

input[type="submit"] {
  display: block;
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  background-color: #white;
  border-color: green;
  min-width: 300px;

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:

Welcome to our community!

Check your html code firstly, and make necessary corrections, then post the code again here.

i still dont understand what’s wrong, i tried modifying it and nothing

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