Fix input width and padding issue

Have you tried giving your input element some padding and width, and the width gets messed up? Like this:

input {
  width: 100%;
  padding: 10px 50px;
}

Why is my input getting larger than 100%? 🤷‍😩

This is fixed with box-sizing: border-box

input {
  width: 100%;
  padding: 50px;
  box-sizing: border-box;
}

Article red lines are to see full width.