Design a Registration Form - Step 56

jahns76lynn · March 30, 2025, 8:25pm

Tell us what’s happening:

it is telling me i need to use existing margin on step56 on registration form.
i have margin: 1em 0;

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Registration Form</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Registration Form</h1>
    <p>Please fill out this form with the required information</p>
    <form method="post" action='https://register-demo.freecodecamp.org'>
      <fieldset>
        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
      </fieldset>
      <fieldset>
        <legend>Account type (required)</legend>
        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
      </fieldset>
      <fieldset>
        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
        <label for="referrer">How did you hear about us?
          <select id="referrer" name="referrer">
            <option value="">(select one)</option>
            <option value="1">freeCodeCamp News</option>
            <option value="2">freeCodeCamp YouTube Channel</option>
            <option value="3">freeCodeCamp Forum</option>
            <option value="4">Other</option>
          </select>
        </label>
        <label for="bio">Provide a bio:
          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
        </label>
      </fieldset>
      <label for="terms-and-conditions">
        <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
      </label>
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

/* file: styles.css */
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
  color: #f5f6f7;
  font-family: Tahoma;
  font-size: 16px;
}

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

form {
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
}

fieldset {
  border: none;
  padding: 2rem 0;
  border-bottom: 3px solid #3b3b4f;
}

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

label {
  display: block;
  margin: 0.5rem 0;
}

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

input, textarea {
  background-color: #0a0a23;
  border: 1px solid #0a0a23;
  color: #ffffff;
}

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


/* User Editable Region */

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

}

/* User Editable Region */

Your browser information:

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

Challenge Information:

Design a Registration Form - Step 56

fcc4b6d10c4-b540-4e2 · March 30, 2025, 8:39pm

You didn’t do this bit:

adjust its width to never be below 300px

And the margin shortcut you are using would set top to 1em, left and right to 0, and bottom to auto, so that needs work.

https://www.w3schools.com/Css/css_margin.asp

EDIT: Oops! Missed your min-width setting.

jahns76lynn · April 3, 2025, 11:47am

i have min-width under the submit input. its the last entry. i keep trying it. but never seem to get it.

pedrovillanova · April 3, 2025, 11:52am

Your margin is 1em 0 auto

you can’t put different scales in your CSS element or the site might not work sometimes

jahns76lynn · April 3, 2025, 11:52am

Tell us what’s happening:

what am i missing here? i added margin in order top right bottom left and set a minwidth at end to 300px??

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Registration Form</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Registration Form</h1>
    <p>Please fill out this form with the required information</p>
    <form method="post" action='https://register-demo.freecodecamp.org'>
      <fieldset>
        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
      </fieldset>
      <fieldset>
        <legend>Account type (required)</legend>
        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
      </fieldset>
      <fieldset>
        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
        <label for="referrer">How did you hear about us?
          <select id="referrer" name="referrer">
            <option value="">(select one)</option>
            <option value="1">freeCodeCamp News</option>
            <option value="2">freeCodeCamp YouTube Channel</option>
            <option value="3">freeCodeCamp Forum</option>
            <option value="4">Other</option>
          </select>
        </label>
        <label for="bio">Provide a bio:
          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
        </label>
      </fieldset>
      <label for="terms-and-conditions">
        <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
      </label>
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

/* file: styles.css */
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
  color: #f5f6f7;
  font-family: Tahoma;
  font-size: 16px;
}

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

form {
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
}

fieldset {
  border: none;
  padding: 2rem 0;
  border-bottom: 3px solid #3b3b4f;
}

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

label {
  display: block;
  margin: 0.5rem 0;
}

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

input, textarea {
  background-color: #0a0a23;
  border: 1px solid #0a0a23;
  color: #ffffff;
}

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


/* User Editable Region */

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

}

/* User Editable Region */

Your browser information:

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

Challenge Information:

Design a Registration Form - Step 56

fcc4b6d10c4-b540-4e2 · April 3, 2025, 11:52am

Yes. I edited my previous post to let you know I had overlooked that. I think all you need to do is fix your margins. The link I sent you will show you the different margin shortcuts you can use.

jahns76lynn · April 3, 2025, 11:54am

i did all of that. im getting really frustrated. lol

fcc4b6d10c4-b540-4e2 · April 3, 2025, 11:54am

Would you send your updated code, please?

jahns76lynn · April 3, 2025, 11:57am

body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #1b1b32;
color: #f5f6f7;
font-family: Tahoma;
font-size: 16px;
}

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

form {
width: 60vw;
max-width: 500px;
min-width: 300px;
margin: 0 auto;
}

fieldset {
border: none;
padding: 2rem 0;
border-bottom: 3px solid #3b3b4f;
}

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

label {
display: block;
margin: 0.5rem 0;
}

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

input, textarea {
background-color: #0a0a23;
border: 1px solid #0a0a23;
color: #ffffff;
}

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

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

}

fcc4b6d10c4-b540-4e2 · April 3, 2025, 11:59am

Your margins are still an issue. RESET this step and try again.

jahns76lynn · April 3, 2025, 12:01pm

ok. thanks. i will do it again…buit i feel insanity rapidly approaching

jahns76lynn · April 3, 2025, 12:01pm

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

pedrovillanova · April 3, 2025, 12:03pm

You should change your margin: 0 auto; to margin: 1em;

fcc4b6d10c4-b540-4e2 · April 3, 2025, 12:04pm

re: insanity. I get it. Please reset again then reread the instructions. It says you should only change the top/bottom setting of the margin setting in the given code. Try that, please. And don’t forget your min-width. That was correct.

HINT: Currently, the top/bottom setting of the margin shortcut is 0.

JuniorQ · April 3, 2025, 12:04pm

Hey,
It doesn’t tell you to set the left and right margins to 0. Does it?

pedrovillanova · April 3, 2025, 12:06pm

No it doenst
it tells you to change the margin

seopostexpert · April 3, 2025, 12:08pm

Hi there!

Your issue is with the margin property. Right now, you have:

jahns76lynn:

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

}

To fix this, remove the 0 . This will properly center the button and allow it to pass the test. Let me know if you need more help!

pedrovillanova · April 3, 2025, 12:11pm

@jahns76lynn

You need to reed the discription
You need to duble check your code to see if it is wrong
You need to Reed-Seach-Ask
If your code doesnt work you go to the forum to see if someone helps you

jahns76lynn · April 3, 2025, 12:11pm

the top and bottom margin only
nothing i do works.

pedrovillanova · April 3, 2025, 12:16pm

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

}

Your margin is wrong
the step tells you to put it to 1em not that way you did
remove the 0 1em 0; and only put 1em and see if it works

Topic		Replies	Views
Building a Registration Form - Step 56 use the existing margin property to include 1em on the top and bottom HTML-CSS	3	329	February 13, 2023
Learn HTML Forms by Building a Registration Form - Step 55 HTML-CSS	2	1408	February 1, 2023
Step 54 of html registration form HTML-CSS	3	837	January 4, 2023
Learn HTML Forms by Building a Registration Form - Step 60 HTML-CSS	2	363	September 5, 2023
Learn HTML Forms by Building a Registration Form - Step 61, they said I must add 1em to the existing margin on my submit button,I don’t know what I’m doing wro HTML-CSS	3	82	January 8, 2025

Design a Registration Form - Step 56

Tell us what’s happening:

Your code so far

Your browser information:

Challenge Information:

Tell us what’s happening:

Your code so far

Your browser information:

Challenge Information:

Related topics