Alignment IS wrong!

HTML-CSS
1

Hi,

I don’t know what I am doing wrong here. Nothing is aligned as it should. Plus, beside that things are not aligned, the space between the fieldset element are too far apart. I am sure that I messed up things somewhere. Would someone please guide me about what I am doing wrong?

Thank you.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Survey Form</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="styles.css"/>
  </head>
  <body>
    <main>
      <h1 id="title">~~freeCodeCamp Survey Form~~</h1>
      <p id="description">
        Thank you for taking the time to help us improve the platform</p>

        <form method="post" action="https://survey-form.freecodecamp.rocks">
        <fieldset>
  <label for="first-and-last"> Enter your first and last name <input id="first-and-last" type="text" required name="first-and-last"/></label>
<label for="email"> Enter your email <input id="email" name="email" type="email" required/></label>
  <label for="number"> Enter your age <span>(optional)</span><input id="number" name="number" type="number" max="120" min="13"/></label>
  <fieldset>  
   
  <fieldset>
   <label for="dropdown"> Which option best describe your current role?
     <select id="dropdown" name="dropdown">
<option value="">Select an option</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>
      <label> Would you recommend freCodeCamp to a friend?</label>
 <label for="definitely"><input type="radio" id="definitely" name="definitely-maybe-notsure" value="definitely" class="inline" checked/> Definitely</label>
<label for="maybe">
   <input type="radio" id="maybe" name="definitely-maybe-notsure" value="maybe" class="inline"/> Maybe</label>
       <label for="notsure">
          <input type="radio" id="notsure" name="definitely-maybe-notsure" value="notsure" class="inline"/> Not Sure</label>
          </fieldset>
  <fieldset>
        <label>What is your favorite feature of freeCodeCamp?
    <select>
      <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>
      </fieldset>
<fieldset>
<label>What would you like to see improve? <span>(check all that apply)
  </span></label>
  <label for="1"><input value="1" id="1" name="1" type="checkbox"/> Front-end Projects</label>
 <label for="2"><input value="2" id="2" name ="2" type="checkbox"> Back-end Projects</label>
 <label for="3"><input value="3" id="3"  name="3" type="checkbox"> Data Visualition</label>
 <label for="4"><input value="4" id="4" name="4" type="checkbox"> Challenges</label>
 <label for="5"><input value="5" id="5" name="5" type="checkbox"> Open Source Community</label>
 <label for="6"><input value="6" id="6" name="6" type="checkbox"> Gitter Help Rooms</label>
 <label for="7"><input value="7" id="7" name="7" type="checkbox"> Videos</label>
 <label for="8"><input value="8" id="8" name="8" type="checkbox"> City Meetups</label>
 <label for="9"><input value="9" id="9" name="9" type="checkbox"> Wiki</label>
 <label for="10"><input value="10" id="10" name="10" type="checkbox"> Forums</label>
 <label for="11"><input value="11" id="11" name="11" type="checkbox"> Additional Courses</label>
 </fieldset>
<fieldset> 
  <label for="comments">Any Comments or Suggestions?  
   <textarea id="comments" name="comments" rows="9" cols="70" rowsplaceholder="Enter Your Comment Here...." />
</textarea>
 </fieldset>
<button id="submit" type="submit">Submit</button>
  </form> 
  </body>
  </html>

body {width: 100%;
height: 100hv;
background-color: #5dbc;
margin: 0;
}

h1 {text-align: center;
margin: 1em;
}

p[id="description"]{text-align: center;
margin-top: -19;
margin-bottom: 2em;
color: blue;
font-size: 17px; }

form {width: 70vw;
  max-width: 600px;
min-width: 200px;
margin: 0 auto;
padding-bottom: 2em;}

fieldset{border: none;
}

fieldset:last-of-type{border-bottom: none;}

label{display: block;
  font-size: 20px;
  margin: 0.5rem 0;}

span{font-size: 14px;}

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

.inline{width: unset;
margin: 0 0.5em 0 0;
verticle-align: middle;}


button[type="submit"]{display:  block;
width: 60%;
height: 1.5em;
margin: 1em auto;
padding-bottom: 1em;
min-width: 300px;
font-size: 17px;}
2

Well, first, it seems your first few fieldsets are all opening tags… I don’t see any closing tags… that might cause some of the alignment issues after the first few fields.

Next, it looks like you set the width of your input, textarea, and select to a width of 100%… but your check boxes are also inputs. So since your checkboxes are set to take up the full width of the page, they end up being on a line of their own.

That’s are far as I looked, hope that gets you moving forward.

3

also, share any “codepen / repl” link that you might have for this, that way its more interactive , happy learning :slight_smile:

4

Hi,
what is a “codepen / repl?” I am assuming it’s the link to the page, right?

5

its one of those online code editor out there, you can code and see it on preview and share it with others when needed to be, you might wanna check this out, as you would need it in fcc “projects”, happy learning :slight_smile: https://codepen.io/