Help please! why is the select input not aligned with the Name Email and Age? isn't the code is the same?

got it! but why is the Submit button so wide? i set it to width=100% so shouldn’t it’s width match the others?
Screen Shot 2022-06-19 at 2.24.11 PM

Remember, when you put a width of 100% on an element it will take up as much width as possible based on the nearest block level parent. The labels on your form also do this because you made them block elements by setting display: block on them. But they don’t take up the entire width available because you have side margins on them. I hope that is enough of a hint to get you in the right direction.

is the nearest block level parent the fieldset? i tried to add side margins but it’s uneven:
Screen Shot 2022-07-01 at 2.50.14 PM

HTML

<! DOCTYPE html>
<html lang="en"> 
  <head>
    <title>Survey Form</title>
    <link rel="stylesheet" type="text/css" 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 id="survey-form">
        <fieldset>
          
          <label class="block" id="name-label">Name <input class="block" id="name" type="text" required placeholder="Enter your name"/></label>

          <label class="block"id="email-label">Email <input class="block" id="email" type="email" placeholder="Enter your Email" required/></label> 

          <label class="block" id="number-label">Age (optional)<input class="block" id="number" type="number" min="10" max="120" placeholder="Age"/></label>

          <label class="block">Which option best describes your current role?
            <select class="block">
            <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>
<fieldset class="unique">
  <legend>Would you recommend freeCodeCamp to a friend?</legend>

<label for="definitely" class="block"><input name="group" value="definitely" id="definitely" type="radio"/>Definitely</label>

  <label for="maybe" class="block"><input name="group" value="maybe" id="maybe" type="radio"/>Maybe</label>

  <label for="not sure" class="block"><input name="group" value="not sure" id="not sure" type="radio"/>Not sure</label>
  </fieldset>

      <label class="block">What is your favorite feature of freeCodeCamp?
            <select id="dropdown" class="block">
            <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> 

<fieldset class="uniqueagain">
      <legend>What would you like to see improved? (Check all that apply) </legend>

      <label class="block"><input value="lazy" id="lazy" type="checkbox" name="personality">Front-end Projects</label> 
           
      <label class="block"><input value="lazy" id="lazy" type="checkbox" name="personality">Back-end Projects</label>
      <label class="block"><input value="energetic" id="energetic" type="checkbox" name="personality">Data Visualization</label>
</fieldset>
      <label class="block">Any comments or suggestions?
				  <textarea rows="10" cols="10" placeholder="Enter your comment here..."></textarea>
			  </label>

     <input id="submit" class="block" type="submit" value="Submit">
    
        </fieldset>
      </form>
    </main>
  </body>
</html>

CSS

h1,p{
  text-align: center;
}

p{
  margin-top: -15px;
  margin-bottom: 30px;
}


.block {
  display: block;
}


fieldset {
  max-width: 500px;
  margin: 0 auto;
}

body {
  font-family: Arial;
}

label {
  margin: 20px;
}

select {
  margin-top: 10px;
}

.unique label{
  margin: 0px;
}
.unique input {
  width: unset;
}
.unique {
  border: 0
}
.uniqueagain label{
  margin:0px;
}
.uniqueagain input {
  width: unset;
}
.uniqueagain {
  border: 0
}

input, textarea, select {
  width: 100%;
}

input[type="submit"] {
  margin-right: 10px;
  margin-left: 10px;
}

Yes, normally it would be. I would use the browser’s dev tools to verify that the submit button is actually in a fieldset. You might find that you are missing something in your HTML.

yes, i think it is… but when i add side margins, it doesn’t seem to work?

I would check again. I think you are missing an opening <fieldset> tag.

hmm i have the opening <fieldset> tag right after the <form id="survey-form"> near the top

You have a few missing tags involving fieldsets. But the one I’m seeing is:

</fieldset>
      <label class="block">Any comments or suggestions?
				  <textarea rows="10" cols="10" placeholder="Enter your comment here..."></textarea>
			  </label>

     <input id="submit" class="block" type="submit" value="Submit">
    
        </fieldset>

You’ve got two closing </fieldset>s in a row with no opening <fieldset> between them.

It would be a good idea to run your HTML through a validator to find all of these issues.

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