HTML:
<label class="block" id="name-label">Name <input class="block" id="name" type="text" required placeholder="Enter your name"/></label>
<label class="block"id="email-label">Email <input class="block" id="email" type="email" placeholder="Enter your Email" required/></label>
<label class="block" id="number-label">Age (optional)<input class="block" id="number" type="number" min="10" max="120" placeholder="Age"</label>
<label class="block">Which option best describes your current role?
<select>
<option value="">Select current role</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>code here
CSS:
h1,p{
text-align: center;
}
.block {
display: block;
}
p{
margin-top: -15px;
margin-bottom: 30px;
}
fieldset {
max-width: 500px;
margin: 0 auto;
}
body {
font-family: Arial;
}
label {
margin: 20px;
}
I would highly recommend you run your own code through a validator as it will find little errors that your eye can’t always see. For example, that you accidentally left off the closing > in the Age input 
1 Like
oops! totally didn’t see that! thanks so much 
can u help me with this:
why are the radio buttons far apart from each other? i didn’t add any margins or anything?
HTML:
<label>Would you recommend freeCodeCamp to a friend?</label>
<label for="definitely" class="block"><input name="group" value="definitely" id="definitely" type="radio"/>Definitely</label>
<label for="maybe" class="block"><input name="group" value="maybe" id="maybe" type="radio"/>Maybe</label>
<label for="not sure" class="block"><input name="group" value="not sure" id="not sure" type="radio"/>Not sure</label>
CSS:
.block {
display: block;
}
fieldset {
max-width: 500px;
margin: 0 auto;
}
body {
font-family: Arial;
}
label {
margin: 20px;
}
select {
margin-top: 10px;
}
is there any way i can have a margin of 20px for all my other label elements except for the ones with radio buttons?
Usually, for this type of multiple choice question, you would wrap the radio buttons in a fieldset (and use a legend for the question text). So you could style any labels in a fieldset differently from the other labels by using a more specific CSS selector (i.e. fieldset label). I would highly recommend you do this.
in that case, the style i have for label elements wouldn’t apply to the fieldset label elements?
hmm in my case, all of my other labels in the form is in one single fieldset, so using the selector fieldset label would affect them as well.
If that’s the case, then give the fieldset for the radio buttons a unique class and use that class to style the labels.
would i use the selector .class label ?
Yes, that is the format you would use, replace class with whatever class you actually gave the fieldset.
WORKED!!! this method is amazing! thank u sm 
one last question: why does the textarea go over the fieldset? i put width: 100%;
CSS:
input, textarea, select {
width: 100%;
}
HTML:
<label>Any comments or suggestions?
<textarea rows="3" cols="" placeholder="Enter your comment here..."></textarea>
</label>
It’s tough for me to give you a good answer without seeing all of your HTML and CSS because there could be a variety of reasons.
sorry! here is the full
HTML:
<! DOCTYPE html>
<html lang="en">
<head>
<title>Survey Form</title>
<link rel="stylesheet" type="text/css" 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 id="survey-form">
<fieldset>
<label class="block" id="name-label">Name <input class="block" id="name" type="text" required placeholder="Enter your name"/></label>
<label class="block"id="email-label">Email <input class="block" id="email" type="email" placeholder="Enter your Email" required/></label>
<label class="block" id="number-label">Age (optional)<input class="block" id="number" type="number" min="10" max="120" placeholder="Age"/></label>
<label class="block">Which option best describes your current role?
<select class="block">
<option value="">Select current role</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>
<fieldset class="unique">
<legend>Would you recommend freeCodeCamp to a friend?</legend>
<label for="definitely" class="block"><input name="group" value="definitely" id="definitely" type="radio"/>Definitely</label>
<label for="maybe" class="block"><input name="group" value="maybe" id="maybe" type="radio"/>Maybe</label>
<label for="not sure" class="block"><input name="group" value="not sure" id="not sure" type="radio"/>Not sure</label>
</fieldset>
<label class="block">What is your favorite feature of freeCodeCamp?
<select id="dropdown" class="block">
<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>
</label>
<fieldset class="uniqueagain">
<legend>What would you like to see improved? (Check all that apply) </legend>
<label class="block"><input value="lazy" id="lazy" type="checkbox" name="personality">Front-end Projects</label>
<label class="block"><input value="lazy" id="lazy" type="checkbox" name="personality">Back-end Projects</label>
<label class="block"><input value="energetic" id="energetic" type="checkbox" name="personality">Data Visualization</label>
</fieldset>
<label>Any comments or suggestions?
<textarea rows="3" cols="" placeholder="Enter your comment here..."></textarea>
</label>
<input id="submit" class="block" type="submit" value="Submit">
</fieldset>
</form>
</main>
</body>
</html>
CSS:
h1,p{
text-align: center;
}
p{
margin-top: -15px;
margin-bottom: 30px;
}
.block {
display: block;
}
fieldset {
max-width: 500px;
margin: 0 auto;
}
body {
font-family: Arial;
}
label{
margin: 20px;
}
select {
margin-top: 10px;
}
textarea {
margin: 5px 20px
}
.unique label{
margin: 0px;
}
.unique input {
width: unset;
}
.unique {
border: 0
}
.uniqueagain label{
margin:0px;
}
.uniqueagain input {
width: unset;
}
.uniqueagain {
border: 0
}
input, textarea, select {
width: 100%;
}
When you set the width on the textarea to 100%, that 100% is in relation to the nearest block level parent, which in this case would be the fieldset that wraps all of your form elements. So the width of the textarea is as wide as the fieldset but then you are adding side margins to the textarea which is pushing it to the left and that’s why it is spilling over the fieldset border.
The easiest way to fix is is to set the label that wraps the textarea to display: block which will make it a block level element. Then remove the side margins on the textarea.
got it! so by setting width=100%, i am essentially fixing the width right? it will always be full width of the fieldset
When you set width: 100% on the textarea you are telling the textarea to take up 100% of the width available, which is the width of its closest block level parent. When you set the label wrapping the fieldset to display: block then the label becomes the closest block level parent for the fieldset, so the textarea will always be as wide as the label that is wrapping it. That label is as wide as the fieldset because a block level element has a width of 100% by default.
ok so the textarea is as wide as the label because the textarea’s closest block level parent is now the label?
Yes, you turned the label into a block level element.