Fala Cesar! blz?
Muito legal seu código!
Cara, tenho uma dica bem simples, porém muito importante pra te dar.
Sua pagina começa a quebrar quando fica abaixo do tamanho do container com classe "principal", nela vc esta usando um "width: 300px", quando vc define um width ele vai seguir esse width até o fim do mundo, pelo componente ser pequeno acaba passando despercebido, porém num componente maior você veria isso com mais facilidade. Aconselho, sempre que possível usar "max-width" ao invés de width, pois como vc está definindo uma "largura máxima" o seu componente sempre vai ser mais responsivo conforme a tela diminui.
Outra coisa importante no html é a semântica das tags. As tags html tem seus significados, normalmente interpretado por motores de busca como o google, ou por softwares de leitura de tela, usado por deficientes visuais, então usar as tags corretas ajuda demais na acessibilidade do seu codigo, fazendo por exemplo que seu site/conteudo seja encontrado pelo google mais facilmente.
como corrigir isso? No seu conteúdo principal, ao invés de usar uma div, tente usar a tag <main>, pois ela indica que aquele é seu conteúdo principal nesta pagina.
Colocar o titulo da pagina em um <h1> também ajuda nisso.
Vou deixar um link para o caso de você querer entender melhor sobre isso:
https://www.devmedia.com.br/html-semantico-conheca-os-elementos-semanticos-da-html5/38065
lembre-se não é preciso gravar tudo isso, só entender já basta, na hora de codar, quando esquecer é só pesquisar no google que ta de boa! abração, meu mano! tbm estou iniciando! então tenhamos um bom aprendizado!
