Aligning input boxes with grid

Question

I tried aligning five input boxes on a row with grid but it overflows the box. I used 1fr for each column. Though when I used 20% for each column, it worked, but when I add padding, it overflows. I want to know why 1fr doesn't work since it is to separate the parent div into 5 equal parts.
https://code.sololearn.com/Wa6b14E6rHLK/?ref=app

Answer 1

Okay, thanks. But it wasn't responsive. After, using 1fr for each column, the input tag shouldn't be that big. It should fit into the .userInput container. But for some reason it doesn't.

Answer 2

in CSS file at .userinput field, you wrote width as 80% change it to 110%