Tell us what’s happening:
I am pretty much finished but it keeps telling me that my #dropdown, my radio buttons, my submit button, and my text area should all be a descendants of my #survey-form, which I thought they were. I can’t seem to find the issue. HELP
**Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="title">Friendship Survey</h1>
<fieldset>
<p id="description">How was your time as my friend?
</p>
</fieldset>
<fieldset>
<form id="survey-form">
<label id="name-label">Name</label>
<input id="name" type="text" required placeholder="Enter your name here"></input>
<label id="email-label">Email</label>
<input type="email" id="email" required placeholder="Enter your email"></input>
<label id="number-label">Age</label>
<input type="number" id="number" Min="18" max="100" optional placeholder="Optional"></input>
</fieldset>
<fieldset>
<p id="rating">Rate your experience 1-5</p>
<select id="dropdown" name="dropdown">
<option disabled selected value>Choose one</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<p id="question">What type of personality do I have?</p>
<label><input name="group1" type="radio" value="normal" class="input-radio">Normal</label>
<label><input name="group1" type="radio" value="goofy" class="input-radio">Goofy</label>
<label><input name="group1" type="radio" value="psycho" class="input-radio">Psycho</label>
<label><input name="group1" type="radio" value="boring" class="input-radio">Boring</label>
<label id="checkbox">Check all that apply:</label>
<label><input type="checkbox" value"Good-driver" class="list">Good Driver</label>
<label><input type="checkbox" value="punctual" class="list">Punctual</label>
<label><input type="checkbox" value="BDE" class="list">BDE</label>
<label><input type="checkbox" value="Gay" class="list">Gay</label>
<p id="comment-section">Where could I improve?</p>
<textarea name="Comment-section" rows="6" cols="30" placeholder="Write a Comment"></textarea>
</fieldset>
<button id="submit" type="submit" value="Submit">Submit</button>
</form>
</body>
</html>
/* file: styles.css */
body {
height: 100%;
width: 100%;
margin: 10;
top: 0;
bottom: 0;
text-align: center;
Background-color: #2d6f3a;
font-family: Tahoma;
font-size: 18;
}
h1, p {
margin: 0.5em auto;
text-align: center;
}
label {
display: block;
margin: 0.5rem;
text-align: center;
}
fieldset {
border: none;
padding: 1rem 0;
border-bottom: 3px solid #3b3b4f;
}
form {
width: 100vw;
max-width: 600px;
min-width: 300px;
margin: 0 auto;
padding-bottom: 1em;
}
input, textarea {
background-color: #3b3b2b;
border: 1px solid #0a0a23;
color: #ffffff;
}
textarea,
select {
margin: 10px 0 0 0;
width: 70%;
min-height: 2em;
}
button {
display: block;
width: 40%;
margin: 1em auto;
height: 2em;
font-size: 1.1rem;
background-color: #3b3b2b;
border-color: white;
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/104.0.0.0 Safari/537.36
Challenge: Survey Form - Build a Survey Form
Link to the challenge: