Oi Joao, tudo bem?
Muito bom você testar o projeto em diferentes telas no DevTools! Esse é um hábito excelente no Front-end.
O código da professora funciona super bem e resolve o layout perfeitamente para os tamanhos de tela mais tradicionais (como 375px e 768px). O detalhe aí é que celulares mais novos, como o iPhone 14 Pro Max, possuem telas um pouco mais largas (na faixa de 430px). Como eles passam do limite de 375px, acabam caindo na regra de tablet e puxando as medidas maiores, o que faz o conteúdo vazar.
Para melhorar isso e deixar o projeto 100% adaptável a qualquer aparelho, a dica é trocar as larguras fixas por porcentagens. Além disso, podemos alterar a sua media query de celular de @media(max-width: 375px) para @media(max-width: 480px). Assim, ela já abraça todos esses celulares mais modernos de uma vez só!
Para facilitar, aqui está o seu código completo já com essas adaptações para você colar e testar:
@font-face {
font-family: "Unbounded";
src: url("../fonts/Unbounded-Bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Poppins";
src: url("../fonts/Poppins-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Reset */
* {
margin: 0;
padding: 0;
}
/* Estilo Desktop */
body{
background-color:#0E1014;
color: #ffffff;
}
header img{
display: block;
margin: 75px 0 0 360px;
}
h1{
font-size: 64px;
font-family: "Unbounded", sans-serif;
text-align: center;
margin-top: 60px;
}
h1 span{
color: #9747FF;
}
p{
font-family: "Poppins", sans-serif;
font-size: 24px;
text-align: center;
margin: 24px auto 0;
width: 90%; /* Ocupa 90% da tela em qualquer dispositivo */
max-width: 792px; /* Trava no tamanho máximo do desktop */
}
a{
color: #ffffff;
font-family: "Poppins", sans-serif;
font-size: 24px;
text-decoration: none;
background-color: #9747FF;
width: 340px;
height: 66px;
display: block;
text-align: center;
line-height: 66px;
border-radius: 36px;
margin: 40px auto;
}
a:hover{
background-color: #8233E8;
}
section img{
display: block;
width: 90%; /* A imagem se adapta à tela */
max-width: 792px;
height: auto; /* Mantém a proporção sem achatar */
margin: 0 auto;
}
@media(max-width: 768px){
header img{
margin:65px 0 0 60px;
}
}
@media(max-width: 480px){
header img{
margin:32px 0 0 16px;
}
h1{
font-size: 40px;
}
p{
font-size: 20px;
}
a{
font-size: 20px;
width: 251px;
}
}
Faz o teste lá no DevTools e me conta se o layout encaixou direitinho agora!
Bons estudos!
Sucesso ✨