Почему элементы input игнорируют контейнер родителя?

*,
*::before,
*::after {
  box-sizing:border-box;
}

Поставьте и все заработает. Так происходит потому что вы указали ширину в 100% для input, но стандартный border-box у браузеров стоит content-box, который не учитывает padding и border в размер ширины

Стандартная разметка в HTML/CSS идет как бы по стандарту(хорошо сказал), вообще кароче если давать padding блокам то он будет идти как-бы в увеличении блока, а если писать box-sizing: border-box; то это значит что эти padding'и будут идти внутрь - если кратко. Почему и как почитайте в гугле.

form *{
    box-sizing: border-box;
}