Uma caixa com width: 100px; padding: 20px; border: 10px; Possui uma largura total de 160px, pois os valores da esquerda e da direita do padding/border são somados ao valor total do width.
Esse é o padrão do CSS, mas você pode mudar isso com a propriedade box-sizing e atribuindo o valor border-box. Em border-box o total do padding e da border não são somados à largura total da caixa. Sendo assim a caixa continua com 100px de largura total.
Esta propriedade facilita muito o trabalho com grids.