Help please! why is the Age not aligned with the Name and Email? The code is the same?

[kellywx12]

Here is the code

HTML:

<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="name" type="email" placeholder="Enter your Email" </label> 
<label class="block" id="number-label">Age (optional)<input class="block" id="number" type="number" min="10" max="120" placeholder="Age"</label>

CSS:

h1,p {text-align: center;}

select{display: block;}

.block {display: block;}

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

fieldset {max-width: 500px;}

body {font-family: Arial;}

label {margin: 20px;}

[nibble]

Hi @kellywx12

Welcome to FCC.

Check the input tag in the elements which are not aligned. Is that how they are supposed to be?

[katep252]

@kellywx12

<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="name" type="email" placeholder="Enter your Email" </label> 
<label class="block" id="number-label">Age (optional)<input class="block" id="number" type="number" min="10" max="120" placeholder="Age"</label>

I don’t know why this is causing only the Age input to be out of line, but you didn’t close your <input> tags. They are self-closing tags, so it should look like this:

<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="name" type="email" placeholder="Enter your Email"/></label> 
<label class="block" id="number-label">Age (optional)<input class="block" id="number" type="number" min="10" max="120" placeholder="Age"/></label>

Once you do that, it will fix your problem!

[kellywx12]

THANK YOU SO MUCH!! also, i set a max width for the entire fieldset, but it is not centered, so when i increase the size of the screen, it does this:

how can i fix this?

[xynoan]

You can try setting the margin of the container horizontally (left, right) to auto. Otherwise, use flexbox?