CSS входной элемент ширина, выходящий за пределы контейнера

Question

Почему ширина электронной почты и пароля выходит из ширины input-container?

form { 
 
    background: #ccc; 
 
    } 
 
    .input-container { 
 
    background: red; 
 
    width: 469px; 
 
    margin: 0 auto; 
 
    } 
 
    .usermail, 
 
    .userpword { 
 
    margin-top: 10px; 
 
    } 
 
    input, 
 
    button { 
 
    width: 100%; 
 
    border-radius: 6px; 
 
    border: 1px solid #cacece; 
 
    padding: 10px 12px; 
 
    font-size: 1em; 
 
    } 
 
    .username input { 
 
    width: 206px; 
 
    }

<form action='' method='post' id='signupform'> 
 
    <div class='input-container'> 
 
    <div class='username'> 
 
     <input type='text' name='fname' id='fname' placeholder='First Name'> 
 
     <input type='text' name='lname' id='lname' placeholder='Last Name'> 
 
    </div> 
 
    <div class='usermail'> 
 
     <input type='email' name='email' id='email' placeholder='Email'> 
 
    </div> 
 
    <div class='userpword'> 
 
     <input type='password' name='pword' id='pword' placeholder='Password'> 
 
    </div> 
 
    <button>Sign Up</button> 
 
    </div> 
 
</form>

Answer 1

Это потому, что вы установили отступы. Он суммирует значение ширины элемента с набором дополнений.

Чтобы избежать этого, рекомендуется добавить свойство box-sizing: border-box

Пример:

#element{ 
    box-sizing: border-box;} 

Или еще лучше:

*{ 
    box-sizing: border-box;}