Почему изменяется размер ?

Всем привет, совсем недавно начал изучение HTML + CSS, верстаю простую форму авторизации, возникла проблема при изменение размеров браузера поле input с типом button изменяется в размерах, а поля email и password остаются не изменными, как сделать чтобы поле не изменяло размеры, обьясните пожалуйста что я делаю не так

        <div class="email-box">
            <input class="input-email" type="email" name="email" placeholder="Email Address">
        </div>
        <div class="password-box">
            <input class="input-password" type="password" name="password" placeholder="Password">
        </div>
        <div class="login-box">
            <input class="input-start" type="button" value="Login">
        </div>


.email-box
{
    display: flex;
    margin: 0 auto;
    width: 80%;
    justify-content: center;
}

.input-email
{
    padding: 10px;
}

.password-box
{
    display: flex;
    margin: 0 auto;
    width: 80%;
    justify-content: center;
}

.input-password
{
    padding: 10px;
}

.login-box
{
    display: flex;
    margin: 0 auto;
    width: 80%;
    justify-content: center;
}

.input-start
{
    width: 100%;
}