Olá, Victor.

Tudo bem?

Essa parte roxa é a representação do display-flex que você aplicou na classe .apresentacao-curriculo que é a tag <main>, se você adicionar mais elementos dentro da main vai ficar nesse espaço ao lado do texto do curriculo onde está roxo. Se por acaso você quiser só centralizar o texto, você vai precisar adicionar uma propriedade do display-flex nessa classe .apresentacao-curriculo que é o justify-content: center;, lembre-se que você está trabalhando com display-flex ele que nos ajuda com a posição dos elementos.

Espero ter ajudado. Qualquer dúvida manda aqui. Valeu.

Olá Renan, eu consegui remover esse box roxo com base no que você falou, mas agora o conteúdo da minha página continua extrapolando a tela e aparece a barra de rolagem horizontal. Queria diminuir esse conteúdo para remover essa barra de rolagem que não agrega em nada (visto que não tem nada pro lado pra onde ela rola).

Tenta remover os paddings laterais que você atribuiu pode ser isso.

Fiz isso também, aí cria uma margin no lado que eu removo o padding. Tento zerar o margin no elemento específico e a alteração não é aplicada.

Entendi, eu peguei o seu código de novo e alterei algumas coisas somente na classe .apresentacao-curriculo que se refere a main da página de currículo. Eu adicionei o display-flex e utilizei uma propriedade dele para centralizar o conteúdo que é o justify-content: center; ai alterei o padding, para ter 50px para cima e 50px para baixo somente, e zero para as laterais, com isso ele deve centralizar.

A classe que eu mudei já com as alterações:

.apresentacao-curriculo {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 40px;
    padding: 50px 0;
}

RESULTADO:

É muito legal aprender mais sobre o display-flex, pois ele ajuda muito e não precisa ficar calculando as margens etc.

Espero ter ajudado. Qualquer dúvida manda aqui de novo.