Всё дело в рамке border
.
100% берётся в случае box-sizing:content-box
(в данном случае это значение выставлено по умолчанию) от размера содержимого а рамка накидывается поверх, что и даёт дополнительный размер.
Исправляем выставляя box-sizing: border-box;
к стилю input
.
Таким образом размеры 100% будет считаться вместе с рамкой и ничего за границу вылезать уже не будет.
.form_wapper {
box-shadow: 0 0 16px 4px #00000047;
max-width: 243px;
margin: 0 auto;
padding: 59px 25px 28px;
}
.form_wapper input {
width: 100%;
box-sizing: border-box; // Добавили
}
.form_wapper button {
width: 100%;
border: none;
margin: 0;
}
<div class="form_wapper">
<form>
<input type="text">
<input type="text">
<input type="text">
<button>button</button>
</form>
</div>
Но я предлагаю воспользоваться более идеологически правильным способом, так что бы не зависеть от border
и неочевидного поведения 100%
, сделать решения на основе flex-box
который по сути и предназначен для решения подобных задач.
.form_wapper {
box-shadow: 0 0 16px 4px #00000047;
max-width: 243px;
margin: 0 auto;
padding: 59px 25px 28px;
}
.form_wapper .form {
display: flex;
align-items: stretch;
flex-direction: column;
}
.form_wapper button {
border: none;
}
<div class="form_wapper">
<form class="form">
<input type="text">
<input type="text">
<input type="text">
<button>button</button>
</form>
</div>