Hey there,
nice to meet you! 
There is a CSS property called box-sizing.
The
box-sizingproperty defines how the width and height of an element are calculated: should they include padding and borders, or not.
The default value of this attribute is:
content-box: Default. The width and height properties (and min/max properties) includes only the content. Border and padding are not included.
When you use width: 100% on your input, you give your input content the width 100% and the border and padding go on top. That’s why it overflows. When you hover over the element in the Dev Tools, you can see this.
You can have a look at this one:
border-box: The width and height properties (and min/max properties) includes content, padding and border.
I think this is what makes more sense.