i cant seem to align my labels with radio and checkbox.
can someone please enlighten me in where i have gone wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Free CodeCamp Survey Form</title>
<link rel="stylesheet" href="styles.css" />
<h1 id="title">Free CodeCamp Survey Form</h1>
<p id="description">Please fill out this short survey to help us improve the platform</p>
</head>
<body>
<form id="survey-form">
<fieldset>
<label id="name-label">
Name</label>
<input required id="name"
type="text"
placeholder="Name"/>
<label id="email-label">Email</label>
<input
required id="email"
type="email"
placeholder="Enter your email"/>
<label id="number-label">Age</label>
<input required id="number"
type="number"
min="13"
max="100"="
placeholder="Age"/>
</fieldset>
<fieldset><legend>What option best describes your current role?</legend>
<select id="dropdown">
<option>Select your current role</option>
<option>Employed Full Time</option>
<option>Employed Part Time</option>
<option>Self Employed</option>
<option>Student</option>
</select>
</fieldset>
<fieldset><legend>Would your recommend CodeCamp to a friend?</legend>
<input name="definitely-maybe-no"
id="definitely"
type="radio"
value="1"
class="inline">
<label>Definitely</label>
<input name="definitely-maybe-no"
value="2"
id="maybe"
type="radio"
class="inline">
<label>Maybe</label>
<input name="definitely-maybe-no"
id="no"
type="radio"
value="3"
class="inline">
<label>No</label>
</fieldset>
<fieldset><legend>What is your favourite CodeCamp feauture?</legend>
<select id="dropdown">
<option>Select an option</option>
<option>Projects</option>
<option>Challenges</option>
<option>Community</option>
<option>Open Source</option>
</select>
</fieldset>
<fieldset><legend>What would you like to see improved?</legend>
<legend>(check all that apply)</legend>
<input
name="front-end"
id="Front-end"
type="checkbox"
value="1">
<label>Front-end projects</label>
<input
name="back-end"
value="a"
id="Back-end"
type="checkbox">
<label>Back-end projects</label>
<input
name="visualization"
id="visualization"
type="checkbox"
value="b">
<label>Data Visualization</label>
<input
name="challenges"
id="Chalenges"
type="checkbox"
value="c">
<label>Challenges</label>
<input
name="community"
id="community"
type="checkbox"
value="d">
<label>Open source community</label>
</fieldset>
<fieldset>
<label>Any comments or suggestions?</label>
<textarea id="comment-suggestions"
name="comment-suggestion"
rows="3"
cols="30"
placeholder="Enter your comment here...">
</textarea>
</fieldset>
<input id="submit" type="submit" value="Submit" />
</form>
</body>
<footer>
</footer>
</html>
body{
background-position: center;
background-size: cover;
margin: 0;
font-family: 'DM sans', sans serif;
color: white;
background-image: url("https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg");
}
form{
width: 60%;
background-color: rgb(0,0,100);
margin: auto;
max-width: 500px;
min-width: 300px;
padding: 1em;
margin-bottom:10;
border-radius: 20px;
}
fieldset{
border: 0;
}
h1,p{
text-align: center;
}
input,textarea,select{
background-color: white;
width:100%;
}
input[type="checkbox"] {
width: 10;
display: block;
}
label{
display:
}
input[type="submit"]{
width: 100%;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36
Challenge Information:
Survey Form - Build a Survey Form