При изменении разрешения обрезаются input

Question

Столкнулся с такой проблемой, при адаптивной верстке. Дело в том, что при изменении разрешения обрезаются input'ы, при чем при с разных сторон. Раньше стояла фиксированная ширина для самих инпутов, после выставил ограничение по ширине для form, а инпутам поставил ширину 100%, но это не помогло и инпуты все равно обрезаются (и слева-справа и сверху-снизу). Тестил в диапазоне 1200px-1400px Хотелось бы понять, как сделать его нормальным...

body {
    margin: 0;
    padding: 0;
    font-size: 15px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Ubuntu', sans-serif;
    font-weight: bold;
}

div, p, input, button, form, span, a, ul, li {
    box-sizing: border-box;
}

.container {
    width: 1171px;
    margin: 0 auto;
}
.mail {
    background: #ecf3f8;
    text-align: center;
    display: flex;
    padding-bottom: 106px;
}

.mail h2 {
    font-size: 30px;
    margin-top: 100px;
}
.form {
    margin: 57px auto 0 auto;
    width: 343px;
}

.form input {
    padding-left: 14px;
    margin-bottom: 15px;
    width: 100%;
    height: 48px;
}

.button {
    width: 343px;
    height: 56px;
    background: #ffd429;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: #2e2a1b;
}

.button:hover {
    background: #e0b300;
}

<section class="mail">
        <div class="container">
            <h2>Форма заказа билета в будущее</h2>
            <form action="#" class="form">
                    <input type="text" placeholder="Имя" class="input" required>
                    <input type="mail" placeholder="E-mail" class="input" required>
                    <input type="tel" placeholder="Телефон" class="input" required>
                    <input type="text" placeholder="Куда я полечу в ближайшее время?" class="input" required>
                    <button type="submit" class="button">Двигаться к мечте!</button>
            </form>
        </div>
        </section>

Answer 1

Решил проблему путем добавления border к input в css.

БЛОГ НА HUSL

При изменении разрешения обрезаются input

Ответы (1 шт):