Проблему с шириной тянущихся полей решить сложно. Идеальным вариантом было бы изменение алгоритма расчёта ширины элемента, чтобы свойство width задавало не ширину содержания, а общую ширину.

К счастью, такая возможность в CSS есть. Реализуется она с помощью свойства box-sizing.

Это свойство имеет два значения:

1. content-box — значение по умолчанию, соответствует стандартной блочной модели.
2. border-box — изменяет режим расчёта ширины элемента на описанный выше: теперь ширина элемента включает и рамку, и внутренние отступы и, собственно, ширину содержания самого элемента.

Полезная статья про box-sizing на русском — «Используйте свойство box-sizing».