0

I created this registration form. Al the fields are supposed to be the same length. However, for some reason the width of the submit button is narrower than the width of the input fields, even though I applied a width of 350px to all of them. Below is the code for the registration form:

:root {
    --main-color: #00308f;
    --secondary-color: #7cb9e8;
    --dark-color: #444;
    --light-color: #fafafa;
}

body {
    font-family: Montserrat,sans-serif;
    background-color: var(--light-color);
    color: var(--dark-color);
    text-align: justify;
    margin-top: 70px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    padding: 1em;
}

.button {
    margin: 0 .5em;
    border-radius: .5em;
    padding: .5em 1.25em;
    font-weight: 700;
    min-width: 80px;
}

.button-submit {
    margin: 1.25em 0 0;
    padding: .6em 1.25em;
    width: 100%;
    background-image: linear-gradient(-45deg,var(--main-color),var(--secondary-color),var(--secondary-color),var(--secondary-color),var(--main-color));
    border: solid 1.5px var(--main-color);
    color: var(--main-color);
}

.button-submit:hover {
    background-image: linear-gradient(-45deg,var(--secondary-color),var(--main-color),var(--main-color),var(--main-color),var(--secondary-color));
    border: solid 1.5px var(--secondary-color);
    color: var(--light-color);
    transition-duration: .4s;
}

.input-field {
    margin: .5em 0;
    border: solid 1px var(--secondary-color);
    border-radius: .5em;
    padding: 0 1em;
    height: 35px;
}

.registration-field {
    width: 350px;
}

.registration-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

@media screen and (max-width:565px) {
    body {
        margin-top: 130px;
    }
}
<form class="registration-form">
      <h2>Create an account</h2>
      <input
        class="input-field registration-field"
        type="text"
        name="name"
        placeholder="Name"
      />
      <input
        class="input-field registration-field"
        type="email"
        name="email"
        placeholder="Email"
      />
      <input
        class="input-field registration-field"
        type="password"
        name="password"
        placeholder="Enter a password"
      />
      <input
        class="input-field registration-field"
        type="password"
        name="passwordConfirmation"
        placeholder="Confirm your password"
      />
      <input
        class="button button-submit registration-field"
        type="submit"
        value="Register"
      />
    </form>

The padding and the margin is the same for all of them so I don't know what happened. Any idea what the problem is?

2 Answers2

3

Your text fields have extra padding (1em) on the sides. If you want them to be exactly 350px wide, you can add box-sizing: border-box to your inputs.

Changes:

.input-field {
  box-sizing: border-box;
}

Snippet:

:root {
    --main-color: #00308f;
    --secondary-color: #7cb9e8;
    --dark-color: #444;
    --light-color: #fafafa;
}

body {
    font-family: Montserrat,sans-serif;
    background-color: var(--light-color);
    color: var(--dark-color);
    text-align: justify;
    margin-top: 70px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    padding: 1em;
}

.button {
    margin: 0 .5em;
    border-radius: .5em;
    padding: .5em 1.25em;
    font-weight: 700;
    min-width: 80px;
}

.button-submit {
    margin: 1.25em 0 0;
    padding: .6em 1.25em;
    width: 100%;
    background-image: linear-gradient(-45deg,var(--main-color),var(--secondary-color),var(--secondary-color),var(--secondary-color),var(--main-color));
    border: solid 1.5px var(--main-color);
    color: var(--main-color);
}

.button-submit:hover {
    background-image: linear-gradient(-45deg,var(--secondary-color),var(--main-color),var(--main-color),var(--main-color),var(--secondary-color));
    border: solid 1.5px var(--secondary-color);
    color: var(--light-color);
    transition-duration: .4s;
}

.input-field {
    margin: .5em 0;
    border: solid 1px var(--secondary-color);
    border-radius: .5em;
    padding: 0 1em;
    height: 35px;
    box-sizing: border-box;
}

.registration-field {
    width: 350px;
}

.registration-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

@media screen and (max-width:565px) {
    body {
        margin-top: 130px;
    }
}
<form class="registration-form">
      <h2>Create an account</h2>
      <input
        class="input-field registration-field"
        type="text"
        name="name"
        placeholder="Name"
      />
      <input
        class="input-field registration-field"
        type="email"
        name="email"
        placeholder="Email"
      />
      <input
        class="input-field registration-field"
        type="password"
        name="password"
        placeholder="Enter a password"
      />
      <input
        class="input-field registration-field"
        type="password"
        name="passwordConfirmation"
        placeholder="Confirm your password"
      />
      <input
        class="button button-submit registration-field"
        type="submit"
        value="Register"
      />
    </form>
Liftoff
  • 24,717
  • 13
  • 66
  • 119
0

:root {
    --main-color: #00308f;
    --secondary-color: #7cb9e8;
    --dark-color: #444;
    --light-color: #fafafa;
}

body {
    font-family: Montserrat,sans-serif;
    background-color: var(--light-color);
    color: var(--dark-color);
    text-align: justify;
    margin-top: 70px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    padding: 1em;
}

.button {
    margin: 0 .5em;
    border-radius: .5em;
    padding: .5em 1.25em;
    font-weight: 700;
    min-width: 80px;
}

.button-submit {
    margin: 1.25em 0 0;
    padding: .6em 1.25em;
    width: 100%;
    background-image: linear-gradient(-45deg,var(--main-color),var(--secondary-color),var(--secondary-color),var(--secondary-color),var(--main-color));
    border: solid 1.5px var(--main-color);
    color: var(--main-color);
}

.button-submit:hover {
    background-image: linear-gradient(-45deg,var(--secondary-color),var(--main-color),var(--main-color),var(--main-color),var(--secondary-color));
    border: solid 1.5px var(--secondary-color);
    color: var(--light-color);
    transition-duration: .4s;
}

.input-field {
    margin: .5em 0;
    border: solid 1px var(--secondary-color);
    border-radius: .5em;
    padding: 0 1em;
    height: 35px;
    width: 100%;
    box-sizing: border-box;
}

.registration-field {
    width: 350px;
}

.registration-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

@media screen and (max-width:565px) {
    body {
        margin-top: 130px;
    }
}
<form class="registration-form">
      <h2>Create an account</h2>
      <div class="registration-field">
        <input
          class="input-field "
          type="text"
          name="name"
          placeholder="Name"
        />
      </div>
      <div class="registration-field">
      <input
        class="input-field "
        type="email"
        name="email"
        placeholder="Email"
      />
      </div>
      <div class="registration-field">
      <input
        class="input-field"
        type="password"
        name="password"
        placeholder="Enter a password"
      />
      </div>
      <div class="registration-field">
      <input
        class="input-field "
        type="password"
        name="passwordConfirmation"
        placeholder="Confirm your password"
      />
      </div>
      <div class="registration-field">
      <input
        class="button button-submit"
        type="submit"
        value="Register"
      />
      </div>
    </form>

your ".input-field" have extra padding. Remove padding from ".input-field" or you can use "box-sizing: border-box;" in the ".input-field"

Aman Sharma
  • 933
  • 1
  • 4
  • 12