Hi,
I don’t know what I am doing wrong here. Nothing is aligned as it should. Plus, beside that things are not aligned, the space between the fieldset element are too far apart. I am sure that I messed up things somewhere. Would someone please guide me about what I am doing wrong?
Thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Survey Form</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<main>
<h1 id="title">~~freeCodeCamp Survey Form~~</h1>
<p id="description">
Thank you for taking the time to help us improve the platform</p>
<form method="post" action="https://survey-form.freecodecamp.rocks">
<fieldset>
<label for="first-and-last"> Enter your first and last name <input id="first-and-last" type="text" required name="first-and-last"/></label>
<label for="email"> Enter your email <input id="email" name="email" type="email" required/></label>
<label for="number"> Enter your age <span>(optional)</span><input id="number" name="number" type="number" max="120" min="13"/></label>
<fieldset>
<fieldset>
<label for="dropdown"> Which option best describe your current role?
<select id="dropdown" name="dropdown">
<option value="">Select an option</option>
<option value="1">Student</option>
<option value="2">Full Time Job</option>
<option value="3">Full Time Learner</option>
<option value="4">Prefer not to Say</option>
<option value="5">Other</option>
</select>
</label>
<label> Would you recommend freCodeCamp to a friend?</label>
<label for="definitely"><input type="radio" id="definitely" name="definitely-maybe-notsure" value="definitely" class="inline" checked/> Definitely</label>
<label for="maybe">
<input type="radio" id="maybe" name="definitely-maybe-notsure" value="maybe" class="inline"/> Maybe</label>
<label for="notsure">
<input type="radio" id="notsure" name="definitely-maybe-notsure" value="notsure" class="inline"/> Not Sure</label>
</fieldset>
<fieldset>
<label>What is your favorite feature of freeCodeCamp?
<select>
<option value="">Select an Option</option>
<option value="1">Challenges</option>
<option value="2">Projects</option>
<option value="3">Community</option>
<option value="4">Open Source</option>
</select>
</fieldset>
<fieldset>
<label>What would you like to see improve? <span>(check all that apply)
</span></label>
<label for="1"><input value="1" id="1" name="1" type="checkbox"/> Front-end Projects</label>
<label for="2"><input value="2" id="2" name ="2" type="checkbox"> Back-end Projects</label>
<label for="3"><input value="3" id="3" name="3" type="checkbox"> Data Visualition</label>
<label for="4"><input value="4" id="4" name="4" type="checkbox"> Challenges</label>
<label for="5"><input value="5" id="5" name="5" type="checkbox"> Open Source Community</label>
<label for="6"><input value="6" id="6" name="6" type="checkbox"> Gitter Help Rooms</label>
<label for="7"><input value="7" id="7" name="7" type="checkbox"> Videos</label>
<label for="8"><input value="8" id="8" name="8" type="checkbox"> City Meetups</label>
<label for="9"><input value="9" id="9" name="9" type="checkbox"> Wiki</label>
<label for="10"><input value="10" id="10" name="10" type="checkbox"> Forums</label>
<label for="11"><input value="11" id="11" name="11" type="checkbox"> Additional Courses</label>
</fieldset>
<fieldset>
<label for="comments">Any Comments or Suggestions?
<textarea id="comments" name="comments" rows="9" cols="70" rowsplaceholder="Enter Your Comment Here...." />
</textarea>
</fieldset>
<button id="submit" type="submit">Submit</button>
</form>
</body>
</html>
body {width: 100%;
height: 100hv;
background-color: #5dbc;
margin: 0;
}
h1 {text-align: center;
margin: 1em;
}
p[id="description"]{text-align: center;
margin-top: -19;
margin-bottom: 2em;
color: blue;
font-size: 17px; }
form {width: 70vw;
max-width: 600px;
min-width: 200px;
margin: 0 auto;
padding-bottom: 2em;}
fieldset{border: none;
}
fieldset:last-of-type{border-bottom: none;}
label{display: block;
font-size: 20px;
margin: 0.5rem 0;}
span{font-size: 14px;}
input, textarea, select {margin: 10px 0 0 0;
width: 100%;
min-height: 1em;
}
.inline{width: unset;
margin: 0 0.5em 0 0;
verticle-align: middle;}
button[type="submit"]{display: block;
width: 60%;
height: 1.5em;
margin: 1em auto;
padding-bottom: 1em;
min-width: 300px;
font-size: 17px;}
