Why are my input field shifted to the right?

Question

I have a small webpage with a container and a form inside it. When I play around with the margins and paddings, the input fields seem to get shifted to the right, even overflowing the window, despite their width being at 100%

How would I go about fixing that, and am I doing it wrong in the first place?

Code:

.mini-window {
    font-family: "Lato", sans-serif;
    width: 33%;
    margin:auto;
    -webkit-box-shadow: 10px 10px 40px -20px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 40px -20px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 40px -20px rgba(0,0,0,0.75);
    padding: 20px;
    margin-top: 200px;
    text-align: center;
}

input {
    width: 100%;
    font-size: 17px;
    margin: 10px;
    padding: 5px;
}

<div class="center-container">
    <div class="mini-window">
        <h1>Registration</h1>
        <form>
            <input id="email" type="text" placeholder="Email">
            <input id="password" type="password" placeholder="Password">
            <input id="repeatPassword" type="password" placeholder="Repeat password">
            <input id="organization" type="text" placeholder="Organization">
            <input id="first" type="text" placeholder="First name">
            <input id="last" type="text" placeholder="Last name">
            <button type="button" onclick="registerClick()">Register</button>
        </form>
        <p id="errorMessage" class="error"></p>
    </div>
</div>

@DanielA.White how is that not a minimal reproducible example? — frogstair, Jun 28 '20 at 19:54

score 0 · Accepted Answer · answered Jun 28 '20 at 20:02

The width of your inputs is 100% of the width of the containing div, with a margin of 10px you will of course end up with that result.

Changing the width to 90% for instance is a simple way of solving it.

.mini-window {
    font-family: "Lato", sans-serif;
    width: 33%;
    margin:auto;
    -webkit-box-shadow: 10px 10px 40px -20px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 40px -20px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 40px -20px rgba(0,0,0,0.75);
    padding: 20px;
    margin-top: 200px;
    text-align: center;
}

input {
    width: 90%;
    font-size: 17px;
    margin: 10px;
    padding: 5px;
}

<div class="center-container">
    <div class="mini-window">
        <h1>Registration</h1>
        <form>
            <input id="email" type="text" placeholder="Email">
            <input id="password" type="password" placeholder="Password">
            <input id="repeatPassword" type="password" placeholder="Repeat password">
            <input id="organization" type="text" placeholder="Organization">
            <input id="first" type="text" placeholder="First name">
            <input id="last" type="text" placeholder="Last name">
            <button type="button" onclick="registerClick()">Register</button>
        </form>
        <p id="errorMessage" class="error"></p>
    </div>
</div>

this will not fix the issue but will *hide it*. We can still see the issue on small screens — Temani Afif, Jun 28 '20 at 20:08

score -1 · Answer 2 · answered Jun 28 '20 at 20:00

-1

You can fix it by changing your form display to flex

form {
  align-items : center;
  display : flex;
  flex-direction:column;
}

Although, I'm not entirely sure why your form is behaving that way. Adding these lines, fixed it on your codepen.

answered Jun 28 '20 at 20:00

spaceSentinel

630
6
9

Why are my input field shifted to the right?

2 Answers2