I am halfway through the first project of Responsive Web Design Cerification. I have a doubt regarding the css part. Please find the code below.
**HTML :**
<!DOCTYPE html>
<head>
<title>Survey Form</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Poppins:ital,wght@0,300;0,400;1,100&family=Roboto:wght@100;400&display=swap" rel="stylesheet">
</head>
<body>
<header class="header">
<h1 id="title">freeCodeCamp Survey Form</h1>
<p id="description">Thank you for taking the time to help us improve the platform</p>
</header>
<form method="post" action="https://register-demo.freecodecamp.org" id="survey-form">
<div>
<label for="name-label">Name<input type="text" name="name" id="name-label" placeholder="Enter your Name" class="input-box" required/></label>
<label for="email-label">Email<input type="email" name="email" id="email-label" placeholder="Enter your Email" class="input-box" required/></label>
<label for="number-label">Age<input type="number" name="age" id="number-label" min="15" max="80" placeholder="Age" class="input-box"/></label>
<label for="dropdown">Which option best describes your current role?
<select id="dropdown" name="currentrole" class="input-box">
<option value="">Select current role</option>
<option value="student">Student</option>
<option value="fulltimejob">Full Time Job</option>
<option value="fulltimelearner">Full Time Learner</option>
<option value="nosay">Prefer not to say</option>
<option value="other">Other</option>
</select>
</label>
<fieldset>
<legend>Would you recommend freeCodeCamp to a friend?</legend>
<label for="definitely">
<input type="radio" id="definitely" name="recommend"/>Definitely
</label>
<label for="maybe">
<input type="radio" id="maybe" name="recommend"/>Maybe
</label>
<label for="notsure">
<input type="radio" id="notsure" name="recommend"/>Not sure
</label>
</fieldset>
</div>
<div>
<label for="feature">What is your favourite feature of freeCodeCamp?
<select id="feature" name="feature" class="input-box">
<option value="">Select an option</option>
<option value="challenges">Challenges</option>
<option value="projects">Projects</option>
<option value="community">Community</option>
<option value="opensource">Open Source</option>
</select>
</label>
<fieldset>
<legend>What would you like to see improved?<legend>
<label for="front-end-projects">
<input type="checkbox" id="front-end-projects" name="improvement" value="front-end-projects"/>Front-end Projects
</label>
<label for="back-end-projects">
<input type="checkbox" id="back-end-projects" name="improvement" value="back-end-projects"/>Back-end Projects
</label>
<label for="data-visualization">
<input type="checkbox" id="data-visualization" name="improvement" value="data-visualization"/>Data Visualization
</label>
<label for="challenges">
<input type="checkbox" id="challenges" name="improvement" value="challenges"/>Challenges
</label>
<label for="open-source-community">
<input type="checkbox" id="open-source-community" name="improvement" value="open-source-community"/>Open Source Community
</label>
<label for="gitter-help-rooms">
<input type="checkbox" id="gitter-help-rooms" name="improvement" value="gitter-help-rooms"/>Gitter help rooms
</label>
<label for="videos">
<input type="checkbox" id="videos" name="improvement" value="videos"/>Videos
</label>
<label for="city-meetups">
<input type="checkbox" id="city-meetups" name="improvement" value="city-meetups"/>City Meetups
</label>
<label for="wiki">
<input type="checkbox" id="wiki" name="improvement" value="wiki"/>Wiki
</label>
<label for="forums">
<input type="checkbox" id="forums" name="improvement" value="forums"/>Forums
</label>
<label for="additional-courses">
<input type="checkbox" id="additional-courses" name="improvement" value="additional-courses"/>Additional Courses
</label>
</fieldset>
</div>
<div>
<label for="comments">Any comments or suggestions?
<textarea id="bio" name="bio" rows="3" cols="30" placeholder="Enter your comment here..." class="input-box"></textarea>
</label>
<input type="submit" value="Submit" class="input-box"/>
</div>
</form>
</body>
**CSS:**
body {
width: 100vw;
margin: 0;
font-family: 'Poppins', sans-serif;
}
.header {
min-width: 300px;
max-width: 600px;
margin: 50px auto;
text-align: center;
line-height: 0.9;
}
#title {
font-size: 28px;
margin: 2px 0;
}
#description {
font-style: italic;
font-weight: 400;
}
label {
display: block;
margin-bottom: 15px;
}
#survey-form {
width: 80%;
max-width: 800px;
box-sizing: border-box;
margin: 0 auto;
border: 1px solid #052f5f;
background-color: #052f5f;
padding: 25px;
color: white;
}
div {
width: 100%;
}
.input-box {
box-sizing: border-box;
width: 100%;
}
fieldset {
border: none;
}