[Bug] Gap não está aplicando efeito, porém outros elementos não estão sendo considerados também.

CSS:

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

• { margin: 0; padding: 0; }

body { background-color: black; box-sizing: border-box; color: white; height: 100vh; }

.title-highlight { color: burlywood; }

.apresentacao { align-items: center; display: flex; justify-content: space-between; margin: 10% 15%; }

.apresentacao__conteudo { font-family: "Krona One", sans-serif; flex-direction: column; width: 615px; }

.apresentacao__conteudo__titulo { font-size: 36px; }

.apresentacao__conteudo_paragrafo { font-family: "Montserrat", sans-serif; font-size: 24px; }

.apresentacao__links { display: flex; justify-content: space-between; }

.apresentacao__links__link { background-color: burlywood; border-radius: 16px; color: black; font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 20px; padding: 21.5px 0; text-align: center; text-decoration: none; width: 200px; }

Aqui esta acontecendo o mesmo bug, eu veriifquei os arquivos da aula 5 e estão identicos ao meu (mudando apenas os textos e imagem ), ate quando eu copilo os arquivos da aula 5 não fica como ficou na versão final da aula!! o Projeto no vídeo , o meu ficou assim

Lucas eu cosegui resolver esse problema, nas aulas a resolução que usam é 2048x1080, e meu monitor do notebook esta em 1920x1080 e deu o mesmo problema que o seu. Para resolver mude os seguintes valores no CSS

.apresentacao__conteudo{
    width: 500px; /* Mudei de 615 para 500 , aumentou a distãncia entre a imagem e o texto */
    ...
}

.apresentacao__links__link{
    width: 230px; /*Mudei de 280 para 230, deixando os botões iguais no projeto da aula*/
    ...
}

Olá!

Estou enfrentando o mesmo problema citado pelos colegas. Apesar do meu html e css estarem quase que idêntico aos do projeto original, o resultado na tela não é mesmo.

Além disso, quando dou scroll pra baixo no mouse, o conteúdo se movimento - acredito que não era pra ta acontecendo isso.

Como resolver?

Oi Gustavo, tudo bem ? eu deixei acima a resposta que corrigiu o problema para mim. Parece que o monitor que usam nas aulas é de tamano diferente do que comumente se usa ( no tamanho de 1920x1080 ), altere as informações no css que informei acima e veja se consegue visualizar uma diferença na execução do projeto

Salve, Mateus!

Obrigado pela ajuda. Fiz as alterações aqui e deu algum resultado, porém ainda não está como no Figma. O espaçamento entre as sections tá bem maior e ainda tem a questão do scroll da página que eu acho que não era pra acontecer.

Se for só a questão diferença entre as resoluções dos monitores (o meu, por exemplo, é 2560x1440) tá tudo bem.

Mais uma vez, obrigado pela ajuda!

Acabei de chegar do trabalho, muito obrigado pelo retorno e ajuda Mateus, porém não funcionou para mim.

Baseado na sua resposta eu manipulei a tag da imagem:

img {
    max-width: 40%; /* Limiitando o tamanho da imagem*/
}

Verifica se funciona para você Gustavo.

Obrigadão pela ajuda Mateus!

Acabei de dar uma olhada no github desse projeto e encontrei algumas diferenças do meu código:

https://github.com/alura-cursos/Portifolio-HTML-e-CSS-Curso2/blob/aula_5/style.css

Coloque de um lado o código do projeto do GitHub e do outro lado o seu projeto. Após isso, vai comparando linha a linha, talvez você esteja deixando passar algum detalha que interfira em alguma parte do seu projeto.

Realmente vai dá resolução da tela mesmo, peguei o seu código e na minha resolução com 3440 de largura ficou perfeito, a solução para o problema de vocês vai ser usar Media Queries, mas caso não consigam dar uma solução, fico a disposição de ajudar vocês, compartilha o código do projeto completo (GitHub ou Driver) com imagens e tudo, e fala a resolução usada no desenvolvimento.

Salve, Danilo!

Obrigado por se dispor a ajudar.

Mudei o justify-content de space-between para space-evenly e deu bom!

Você sabe como resolver a questão do scroll da página? Acredito que era pro conteúdo ficar "estático", mas quando rodo o scroll, o conteúdo se movimenta.

Opa Gustavo, fico feliz em saber que ajudei de alguma forma. Sobre teu novo problema, tenta disponibilizar o projeto completo para eu dar uma analisada, se possivel com imagens também, vou dar uma olhada nas aulas para enteder como deve ser o funcionamento da página e analiso teu código para ter dar uma resposta mais acertiva.