Learn HTML Forms by Building a Registration Form - Step 44

Tell us what’s happening:
Describe your issue in detail here.
im pretty sure my property is incorrect but could some one verify if i am atleast close ?
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 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>
        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
        <label for="terms-and-conditions" name="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>
      </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>
      <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;
  left-padding:none;
  right-padding:none;
}

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

Your browser information:

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

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

Link to the challenge:

how about the hints? Are they helping? What do they say and what did that make you try?

Hint

You should remove the padding from the left and right of each fieldset.
that is how i came up with my current code .

ah I see.
To remove padding though, shouldn’t you just delete those lines?
and use the single padding property?
Do you remember how the padding property works?
(Top/Right/Bottom/Left)

This is the question.

Remove the border , and add 2rem of padding only to the top and bottom of each fieldset . Be sure to remove the padding from the left and right.

and I have changed my current code to this

border:none;
  padding-top: 2rem;
  padding-bottom:2rem;
  padding-left:none;
  padding-right:none;
type or paste code here

which is still wrong .

well you could use a single padding property or you could specify these 4 properties as you did.
The problem is you have not given the expected value for the left/right.
Padding expects some kind of number… (in px or rem or em units)

you are absolutely correct , changed the text to the correct code and the code passed but you mentioned “single padding property” could you show me how this would look?

padding: top right bottom left;

And you replace each word with a value like 0px;

1 Like

ah… and just to be specific it has to go in the specific order ?
interesting … thank you for the information .

yes always in that order

your information is correct thank you I just used your method on a different step and passed without having to input multiple property’s . THANK YOU .

np. just remember, it is always clockwise from the Top.

1 Like

that is a great tip Ty