Não entendi o motivo da criação do <div>

Bom dia, Patrick!

A justificativa para se usar a tag div é deixar seu código mais semântica, assim, marcando a "divisão" de cada bloco.

Oi, Patrick. Tudo bem?

Repare que antes de criar e personalizar a div (caixa), a imagem da barbearia estava colada no lado esquerdo, enquanto o menu estava no lado direito, sendo que o que nós queremos é que fique tudo centralizado. Para isso, foi criado uma div e atribuido a classe caixa a ela, já que essa div, de fato, agirá como uma caixa que controla os limites e tamanho tanto da imagem quanto do menu, fazendo com que toda alteração que fizermos nessa div afete também seus elementos internos (imagem e menu).

Nesse caso, o instrutor mudou o posicionamento (position), a largura (width) e o tamanho da margem (margin); o que fez com que tudo que estava dentro da "caixa" ficasse centralizado do jeito que nós queremos, tudo isso alterando apenas os valores da div, sem precisar manipular cada elemento individualmente.

Espero ter ajudado. Se ficou qualquer dúvida, estamos à disposição!

Obrigado Thiago !!!