Learn HTML Forms by Building a Registration Form - Step 55

Tell us what’s happening:
Describe your issue in detail here.

   **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html>
 <head>
   <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 action='https://register-demo.freecodecamp.org'>
     <fieldset>
       <label>Enter Your First Name: <input type="text" name="first-name" required /></label>
       <label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
       <label>Enter Your Email: <input type="email" name="email" required /></label>
       <label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
     </fieldset>
     <fieldset>
       <label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
       <label><input type="radio" name="account-type" class="inline" /> Business Account</label>
       <label>
         <input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
			  </label>
     </fieldset>
     <fieldset>
       <label>Upload a profile picture: <input type="file" name="file" /></label>
       <label>Input your age (years): <input type="number" name="age" min="13" max="120" />
			  </label>
       <label>How did you hear about us?
         <select 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>Provide a bio:
         <textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
			  </label>
     </fieldset>
     <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;
}

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

   **Your browser information:**

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14469.41.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.57 Safari/537.36

Challenge: Learn HTML Forms by Building a Registration Form - Step 55

Link to the challenge:

When you started on this challenge the margin should have looked like this:

margin: 0 auto;

The challenge is asking you to " change the margin property to include 1em on the top and bottom"

They want you to edit the already existing margin declaration. The 0 is referring to the top and bottom margin, and the auto is referring to the left and the right. Since you are being asked to change the top and bottom margin to 1em, you just need to change that 0 to 1em.

What you have done is specified each margin with a separate declaration, which should still work as far as applying margins, it just isn’t what the challenge is asking for and it isn’t as succinct.

1 Like

@CodeTurtle has a good point, the shortcut method is the best to use for this challenge, but specifying each margin separately will also work. Your problem is that you changed the left and right margin to 0 instead of leaving it at auto.

Ah, you are correct. I didn’t catch that.

Some of the tests will actually require that it be done a certain way, so your advice is good, in general you should stick with the format that the default code is using. It just happens in this case that the tests will accept alternative formats.

Thank you very much, I appreciate the help