I am stuck on step 54 of learn html forms by building a registration form

[Qlander]

Here are the instructions:

Step 54

Lastly, for the submit button, you want to separate it from the fieldset above, and adjust its width to never be below 300px.

Change the margin property to include 1em on the top and bottom, and set the width as described above.

Here is the error message:

Hint

You should not change the width property. Use the min-width property.

Here is my code:

</fieldset>
input[type="submit"]
{
  display: block;
  margin: 0 auto;
  width: 60%;
  height: 2em;
  font-size: 1.1rem;
  background-color: #3b3b4f;
  border-color: white;
  min-width: 300px;
  margin-top: 1em;
  margin-bottom: 1em;
}

Thank You!

[udaaff]

@Qlander

Change the margin property to include 1em on the top and bottom

You didn’t change the margin property. They want you to change the shorthand property margin without adding margin-top and margin-bottom separately.

[Qlander]

@Qlander

auto

Thanks for the response. So I changed the margin property from “0 auto” to: “1em 1em” and removed the margin-top and margin-bottom properties.

Which I agree was an error that needed to be addressed but, I am still getting the same Hint or error message of:

“You should not change the width property. Use the min-width property.”

I did not change the width property. I left the width property as it were already. And I added the min-width property as instructed.

Any ideas?

[udaaff]

@Qlander

1em 1em

This value sets all the four margins to 1em. You want to set only top and bottom that is the first one value, the second one should stay auto

[udaaff]

Margin shorthand property

CSS Margin

If the margin property has two values:

• margin: 25px 50px;
  • top and bottom margins are 25px
  • right and left margins are 50px

[Qlander]

Thanks again for the help. I have updated the margin property to: “1em auto”. However I am still getting the same error message about the width:

“You should not change the width property. Use the min-width property.”

I really dont know what to do about this since I never changed the width property and I added the min-width property as instructed.

I wonder why the error message never mentioned anything about the clear margin mistakes. Frustrating.

[udaaff]

@Qlander

input[type="submit"]
{
  display: block;
  margin: 0 auto;
  width: 60%;
  height: 2em;
  font-size: 1.1rem;
  background-color: #3b3b4f;
  border-color: white;
  min-width: 300px;
  margin-top: 1em;
  margin-bottom: 1em;
}

I’ve used your code, fixed the margin property and removed margin-top and bottom and passed. So maybe you want to reset the challenge and try again.

[Qlander]

That worked! Thanks again for your help. Much appreciated.