Please help! I'm having difficulty aligning inputs with their labels

<label id="radio-buttons">Would you recommend freeCodeCamp to a friend?</label>
  <br>

  <input type="radio" name="radio" value="definitely">Definitely
<br>

  <input type="radio" name="radio" value="maybe">Maybe
<br>

  <input type="radio" name="radio" value="not-sure">Not Sure
  <br>
<br>

<Label id="favourite-features>">What is your favourite feature of freeCodeCamp?</label><br>

<input type="checkbox" value="front-end">Front-end projects<br>
<input type="checkbox" value="back-end">Back-end projects<br>
<input type="checkbox" value="data-visualisation">Data Visualisation<br>
<input type="checkbox" value="challenges">Challenges<br>
<input type="checkbox" value="open-source-community">Open Source Community
<br>
<input type="checkbox" value="gitter Help Rooms">Gitter help rooms
<br>
<input type="checkbox" value="videos">Videos
<br>
<input type="checkbox" value="city-meetups">City Meetups
<br>
<input type="checkbox" value="forum">Forum
<br>
<input type="checkbox" value="additional-courses">Additional Courses
<br>
<!--My CSS-->

#survey-form {
  width:60%;
  background-color: #7170ba;
  margin-left: 20%;
  margin-right: 20%;
  padding: 20px;
  color: white;
  text-align: left;
  padding-bottom: 35px;
}

input, select {
  width: 100%;
  margin: 10px 0 0 0;
  height: 2em;
  font-size: 1rem;
}

You do not want all input elements to be width: 100% as that would include the checkbox and radio buttons.

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