Porque quando dou zoom na tela ou tiro ele os outros itens da pagina mudam de tamanho sem acompanhar a mesma ?
e quando mudo para mobile também fica tudo errado e fora do lugar
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
Porque quando dou zoom na tela ou tiro ele os outros itens da pagina mudam de tamanho sem acompanhar a mesma ?
e quando mudo para mobile também fica tudo errado e fora do lugar
Oi, Luis! Tudo certo?
O que acontece é que esse projeto foi construído apenas para telas maiores, como a de computadores. Quando mudamos a exibição do layout, o projeto acaba quebrando.
Para que isso não aconteça, precisamos aplicar o que chamamos de Responsividade, que inclui uma série de práticas ao longo do desenvolvimento de uma aplicação para que ela seja adaptável a diversos dispositivos. Isso inclui o uso de unidades relativas como em, rem, %, vh, vw em vez de unidades absolutas como px, uso de media queries, posicionamento com Grid e Flexbox, entre outros.
Para que você tenha uma visão mais prática do que é Responsividade e como aplicá-la em seu projeto, recomendo muito que assista ao vídeo Transformando um site em resposivo.
E para que você aprofunde ainda mais os conhecimentos em responsividade, recomendo o curso HTML e CSS: trabalhando com responsividade e publicação de projetos.
Espero que essa resposta tenha te ajudado. Em caso de dúvidas, me coloco à disposição.
Um abraço e bons estudos!