Не могу сообразить почему так происходит. По идее он должен был со всех сторон отступ внутри блока отобразить. https://yadi.sk/i/LJUSO4zz3ELk62
Конечно для правильного отображения я добавил паддинг справа. https://yadi.sk/i/QH3lkEQu3ELjwL
Вопрос в том что нужно постоянно поправлять его дополнительно? Или есть другой выход?
Потому что задано width: 100% полю ввода. Это ширина собственно содержимого данного блока. Жёсткая ширина не даёт ему уменьшиться при появлении padding, а они, в свою очередь, увеличивают общий размер блока. Поэтому, чтобы избежать этого, и придумали свойство box-sizing: border-box, которое переключает ширину на общую ширину всего блока с padding-ами и границами, и поле снова влезет в нужные границы.
Спасибо. Разобрался)