Por que 2em a mais?

Oi Nicecio, os 2em a mais são por causa do padding. Você está somando 50% do width, mas 1em de padding a direita e 1em de padding a esquerda, entendeu?

Também estou com dúvidas aqui. Nesse caso, tinha 2em a mais com o padding de 1em somado de cada lado da div. Porém, no exemplo, já tinha um box-sizing: border-box, que por si só já corrigiria o problema, pois o mesmo passaria a contar a partir da borda da div, totalizando os 50%, certo? O box-sizing não é justamente para isso?

E qual a melhor prática, usar o box-sizing, que particularmente acho bem mais prático nesse caso; ou o width: calc(50% - 2em)?

Oi André, tudo bem? Os dois casos resolvem, o que vai definir qual dos dois utilizar, acredito que seja a clareza e talvez o suporte dos navegadores. Qual dos dois é mais claro e simples e qual dos dois é melhor suportado pelos browsers em quais versões. Vai depender disso praticamente. Entendeu?

Ok, obrigado Wanderson!