<label> styling doesn't apply to all labels

[nutcracker105]

I’m working on the Survey Form for the Responsive Web Design Certification. I’m trying to space out the questions on the form by adding “margin-top: 15px;” to the element. This did what I wanted for the first three questions, then stopped when it hit the question on age. When I remove the the rest of the survey questions gain the margin.

Codepen link:

freecodecamp: 1.2

The first part of the survey HTML:

<form id="survey-form">
  <label for="name" id="name-label">Full name</label><br>
  <input type="text" id="name" name="name" placeholder="Jane Doe" required><br>
  <label for="email" id="email-label">Email</label><br>
  <input type="email" id="email" name="email" placeholder="janedoe@provider.com" required><br>
  <label for="age" id="number-label">Age (optional)</lable><br>
  <input type="number" id="number" name="age" min="1" max="120" placeholder="Enter age" required><br>
  
  <label for="dropdown">Which option best describes your current role?</label><br>
  <select id="dropdown" name="currentRole">
    <option value="selectRole">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="preferNotToSay">Prefer not to say</option>
    <option value="other">Other</option>
  </select><br>

The CSS for the label and the form element:

label {
  color: white;
  font-family: verdana, sans-serif;
  font-size: 18px;
  margin-top: 15px;
  margin-bottom: 5px;
}

form {
  display: flex;
  flex-direction: column;
  width: 640px;
  margin: 0 auto;
  background: rgba(9, 2, 27, 0.72);
  padding: 40px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:93.0) Gecko/20100101 Firefox/93.0

Challenge: Build a Survey Form

Link to the challenge:

freeCodeCamp.org

[Roma]

You have a spelling error.
<label for="age" id="number-label">Age (optional)</lable>

On a side note, do not use the <br> element to force line breaks or spacing. That’s what CSS is for.

• Reference MDN Docs

Instead of using <br> elements to have each inline element on a new line use, or set, container elements to be block-level elements so they’ll each take up the full width.

Do not try and replicate the sample projects. They show just one way the project can be done. The instructions say to make yours “functionally similar” and to “give it your own personal style”.

[nutcracker105]

Thank you for the reply!