CSS Indentations (Survey Form project)

Hi all! Struggling a little with this project - I wanted to try to challenge myself to make something as visually similar to the example as I can, but I’m running into this issue where my checkbox and radio labels and inputs are indented further in than everything else. I’m sure it’s some issue with how I set my width or something, but I’m having a hard time figuring it out. Any help would be much appreciated!

HTML:

<!DOCTYPE html>
  <html>
  
    <head>
      <title>Survey Form</title>
      <link rel="stylesheet" href="styles.css">
    </head>
    <body>
      <h1 id="title">freeCodeCamp Survey Form</h1>
      <p id="description">Thank you for taking the time to help us improve the platform</p>
      <form id="survey-form">
        <fieldset>
          <label id="name-label">Name    <input name="name" id="name" type="text" required placeholder="Enter name here"></input>
          </label>
          <label id="email-label">Email <input name="email" id="email" type="email" required placeholder="Enter email here"></input>
          </label>
          <label id="number-label">Age (optional) <input name="age" id="number" type="number" min="0" max="100" placeholder="Enter age here"></input></label>
          <label>Which of these best describes your current role? <select name="current-role" id="dropdown"></label>
          <option value="">(Select current role)</option>
          <option value="1">Student</option>
          <option value="2">Full time job</option>
          <option value="3">Full time learner</option>
          <option value="4">Prefer not to say</option>
          <option value="5">Other</option>
        </select>
          <label>Would you recommend freeCodeCamp to a friend?
          <label><input type="radio" name="rec" value="1"/>Definitely </label>
          <label><input type="radio" name="rec" value="2"/>Maybe </label>
          <label><input type="radio" name="rec" value="3"/>Not sure </label>
          </label>
        <label>What is your favorite feature of freeCodeCamp? <select name="fave-feature" id="dropdown"></label>
          <option value="">(Select an option)</option>
          <option value="1">Challenges</option>
          <option value="2">Projects</option>
          <option value="3">Community</option>
          <option value="4">Open Source</option>
        </select>
        <label>What would you like to see improved? 
          <label><input name="front-end-projects" type="checkbox" value="front-end projects"/> Front-end projects</label>
          <label><input name="back-end-projects" type="checkbox" value="back-end projects"/> Back-end projects</label>
          <label><input name="back-end-projects" type="checkbox" value="back-end projects"/> Data visualization</label>
          <label><input name="back-end-projects" type="checkbox" value="back-end projects"/> Challenges</label>
          <label><input name="back-end-projects" type="checkbox" value="back-end projects"/> Open source community</label>
          <label><input name="back-end-projects" type="checkbox" value="back-end projects"/> Glitter help rooms</label>
          <label><input name="back-end-projects" type="checkbox" value="back-end projects"/> Videos</label>
          </label>
          <label><input name="back-end-projects" type="checkbox" value="back-end projects"/> City meetups</label>
          <label><input name="back-end-projects" type="checkbox" value="back-end projects"/> Wiki</label>
          <label><input name="back-end-projects" type="checkbox" value="back-end projects"/> Forum</label>
          <label><input name="back-end-projects" type="checkbox" value="back-end projects"/> Additional courses</label>
        </label>
        <label>Any comments or suggestions? <textarea id="comments" rows="4" cols="30" placeholder="Enter your comment here..."></textarea>
        </label>
        </fieldset>
        <button id="submit" type="submit">Submit</button>
        </fieldset>
      </form>
      
    </body>
  </html>

CSS:

body {
  background-color: black;
  width: 100%;
  height: 100vh;
  margin: 0;
  color: white;
  font-family: sans-serif;
}

h1 {
  margin-top: 40px;
  margin-bottom: 0px;
}

p {
  margin-top: 10px;
  font-size: 14px;
  font-style: italic;
}

h1, p {
  text-align: center;
  font-family: sans-serif;
}

label {
  display: block;
  margin: 1rem 0;
  padding-right: 20px;
  padding-left: 20px;
}

input[type="text"], input[type="email"], input[type="number"], select {
  display:block;
  margin: 4px 0px 0px 0px;
  border-radius: 5px;
  width: 100%;
  height: 2.5em;
}

input [type="radio"], input[type="checkbox"] {
  margin-left: -10px;
}

fieldset {
  background-color: #2e2561;
  width: 75%;
  margin: auto;
  border: 0px;
  border-radius: 8px;
}

#name-label {
  padding-top: 20px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Build a Survey Form

Link to the challenge:

You’ve got side padding on your labels and you’ve nested labels within labels which is doubling up on the side padding. Also, you shouldn’t nest labels within labels like that, so I think you need to redo some of your HTML.

The radio button and check box groups should use a fieldset and legend.

1 Like

Hey there! I’m quite new to this as well so I might not be the best when it comes to CSS debugging but I went to Codepen to test out your code and went over the Chrome devtools to see what’s going on.

So, you added 20px of padding-left to all your label elements, and your checkbox and radio labels are nested inside two other labels, so basically your radio and checkbox labels have an accumulated 60px of padding on the left, which is what’s causing this super indented look to them.

Screenshots below because I’m terrible at explaining:

Screenshot from 2022-07-05 20-35-32

Screenshot from 2022-07-05 20-35-42

What I would personally do is to add a class attribute to the parent labels and add the padding property only to this class so their child labels don’t get affected by the same values.

You mean you copypasted code from here? Or reservoirducks has a link to his codepen and it’s just me, too blind to find it?)

I copypasted from here haha