Why the input field leaves the div field after applying 100% width to it

Question

I try to create a form input with 100% of the same container width, but everything works fine until I give a registration to the input fields, and when I use the fill for <input type="text"> <input type="password">, these two blocks exit the div, but for <input type="button">it works fine, maybe someone Something to tell me what the problem is and how to fix it.

 body{
        background-color: #eee;
        font-family: Arial;
      }
      .login {
          width: 400px;
          background-color: white;
          margin: 0 auto;
          margin-top: 40px;
          text-align: center;
          padding: 5px 15px 30px 15px;
          box-shadow: 1px 1px 3px RGBA(0, 0, 0, 0.39);
      }
      input {
          width: 100%;
          padding: 10px 13px;
          margin-bottom: 10px;
      }

    <div class="login">
      <h2>Log In</h2>
      <form>
        <input type="text" placeholder="Email">
        <input type="password" placeholder="Password">
        <input type="button" value="Log In">
      </form>
    </div>

Run codeHide result

Answer 1

This is how the box model works. When you add 100% width, it applies to the content. And an extra complement that upsets the alignment. But you can change the window model to calculate the width from the border.

input {
  box-sizing: border-box;
}