Não entendi direito como funciona a box-sizing: border-box.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Não entendi direito como funciona a box-sizing: border-box.
oi tudo bem? vamos olhar por duas óticas. sem o box-sizing: border-box e com ele.
sem o border-box, ao criar uma item qualquer, ele terá o seu tamanho influenciado por todos os atributos (border, margin e padding) assim, se um item tiver o tamnho de 10 px; e você resolve dar um padding de 4px, esse último valor será adicionado ao tamanho total do item que você criou, ou seja, o item tinha tamanho de 10px e passa a ter o total de 14px. então com o box-sizing: border-box, esse atributo vai fazer com que você não tenha a preocupação de calcula o tamanho total do item caso queira, por exemplo, mudar o padding. assim, se você tem um item, e passa para ele tamanho de 10px, e resolve dar um padding de 4px, esse seu item nao tirar 14px como no exemplo anterior, o item continua tendo 10px, mas o box-sizing organiza tudo para que der dentro dos 10px passado.
Ótima explicação Demétrio.