A propriedade border-box significa que, quando
definirmos uma largura para um elemento block, o seu padding e border
vão estar incluídos nessa medida.
Experimenta apagar a linha de css "box-sizing: border-box".
Se apagares vais ver que a largura da lista vai aumentar, isto
é porque a largura que definimos - 38rem - vai deixar de incluir
o padding lateral, ou seja, o padding vai ser acrescentado aos 38rem.
Por exemplo, imagina uma div a que demos:
width: 300px;
padding: 10px;
border: 2px solid black;
O valor de largura (300px) vai incluir os 10px de cada lado e os 2px da borda.
Portanto, a largura para o "conteúdo" dessa div será 300px (largura total) - 20px (padding lateral) - 4px (border dos dois lados) = 276px.
Na lista <ul> que usamos, a largura total vai ser a soma
- das larguras das 4 colunas
- e do padding, uma vez que definimos box-sizing: border-box.
Largura total das colunas:
8rem + 3rem + 3rem + 20rem; = 34rem
À largura das colunas das colunas temos de somar
o padding lateral (2rem de cada lado):
34rem + 2rem + 2rem = 38rem
E assim chegamos a uma medida final de 38rem, que usamos no CSS.
Nota: se tivéssemos definido a propriedade grid-gap, teríamos
de acrescenter esse valor nesta conta para calcular a largura.