Survey Form - Build a Survey Form

For some reason my select elements doesn’t line up with the labels, while all the inputs does, I couldn’t find a solution, can someone suggest one?

body {
  font-family: 'poppins', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  font-height: 1.4;
  color: #f3f3f3;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background-position: center;
  background-size: cover;
  background-image: url("https://media.istockphoto.com/photos/closeup-focus-on-persons-hands-typing-on-the-desktop-computer-show-picture-id1356364268?b=1&k=20&m=1356364268&s=170667a&w=0&h=YibLOYYDkERhgK4BvRw3TzIlPYQAo4nbMnFA-5CvZ0k=");
}

.color-overlay {
  width: 100%;
  height: 100vh;
  background-color: rgba(45, 0, 128, 30%)
}

h1, p{
  text-align: center;
}

h1 {
  margin: 0;
  padding-top: 1em;
}

p {
  margin: 0;
  margin-bottom: 1.5em
}

form {
  max-width: 600px;
  min-width: 300px;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 75%)
}

fieldset {
  border: none;
}

label {
  display: block;
  margin-left: 5px;
  margin-bottom: 0.5em;
}

input,
textarea,
select {
  width: 100%;
  margin: 10px 0 0 0;
  height: 2em;
}

select {
  width: 98%;
  margin-left: auto;
  margin-right: auto;
}

.inline {
  width: unset;
  margin: 0;
  margin-top: -0.3em;
  margin-right: 0.5em;
  vertical-align: middle;
}
<!DOCTYPE html>
<html>
  <link rel="stylesheet" href="styles.css">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Survey Form</title>
  </head>
  <body>
      <div class="color-overlay">
    <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 id="survey-form">
          <fieldset>
          <label id="name-label">Name <input id="name" type="text" placeholder="Enter your name" required></label>
          <label id="email-label">Email <input id="email" type="email" placeholder="Enter your Email" required></label>
          <label id="number-label">Age<span> (Optional)</span> <input id="number" type="number" placeholder="Age" min="13" max="120"></label>
          <label>Which option best describes your current role?</label>
          <select id="dropdown">
            <option disabled selected>Select current role</option>
            <option>Student</option>
            <option>Full Time Job</option>
            <option>Full Time Learner</option>
            <option>Prefer not to say</option>
            <option>Other</option>
          </select>
          </fieldset>

          <fieldset>
            <label>Would you recommend freeCodeCamp to a friend?</label>
            <label><input class="inline" type="radio" value="1" name="recommended"> Definetly</label>
            <label><input class="inline" type="radio" value="2" name="recommended"> Maybe</label>
            <label><input class="inline" type="radio" value="3" name="recommended"> Not sure</label>
          </fieldset>

          <fieldset>
            <label>What is your favorite feature of freeCodecamp?</label>
            <select id="dropdown2">
              <option disabled selected>Select an option</option>
              <option>Challenges</option>
              <option>Projects</option>
              <option>Community</option>
              <option>Open Source</option>
            </select>
            <label>What would you like to see improved?<span> (Check all that apply)</span></label>
            <label><input class="inline" type="checkbox" value="1">Front-end Projects</label>
            <label><input class="inline" type="checkbox" value="2">Back-end Projects</label>
            <label><input class="inline" type="checkbox" value="3">Data Visualization</label>
            <label><input class="inline" type="checkbox" value="4">Challenges</label>
            <label><input class="inline" type="checkbox" value="5">Open Source Community</label>
            <label><input class="inline" type="checkbox" value="6">Gitter help rooms</label>
            <label><input class="inline" type="checkbox" value="7">Videos</label>
            <label><input class="inline" type="checkbox" value="9">Wiki</label>
            <label><input class="inline" type="checkbox" value="8">City Meetups</label>
            <label><input class="inline" type="checkbox" value="10">Forum</label>
            <label><input class="inline" type="checkbox" value="11">Additional Courses</label>
            <label>Any comments or suggestions?</label>
            <textarea placeholder="Enter your comment here..."></textarea>
          </fieldset>
          <input type="submit" id="submit" value="Submit">
        </form>
      </div>
  </body>
</html>

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:

There’s definitely more than one way to approach this, but a simple one I saw was moving the margin from your input, most of which are nested inside labels, to your labels. Though you’ll need to adjust the label for current role with this method as the input is outside the label. (if you put the margin with 0’s above the other two margins in that selector, they will still apply the same as they already do)

label {
  display: block;
  margin-left: 5px;
  margin-bottom: 0.5em;
}

input,
textarea,
select {
  width: 100%;
  margin: 10px 0 0 0;
  height: 2em;
}

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.