Abrindo novo tópico para mesma questão: Layout diferente. iPhone 6/7/8 e navegadores

Só para ilustrar o resultado diferente.

Embora seja um print, não tenha movimento, dá pra perceber o leve deslocamento para a direita do conteúdo, que gerou a rolagem. Além da distribuição do texto da tag <p> que ficou diferente.

O meu também não está ficando igual ao figma. t

Pra resolver isso minha classe cabeçalho ficou assim:

.cabecalho {
    color: var(--branco);

    width: 100%;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding-top: .1rem;
    padding-bottom: .1rem;

    border-bottom: 1px solid var(--borda-cabecalho-mobile);

    position: absolute;
}

Basicamente troquei os paddings de .75rem pra .1

Ficou na mesma.

José... você tentou abrir em navegador diferente?

Minha 'treta' foi essa. No mozilla ele abriu idêntico ao protótipo. No chrome, não. Eu segui visualizando o projeto, agora, no Mozilla e tá perfeito.

Veja só... Fui abrir no Chrome agora, antes de enviar a resposta. E tá perfeito, também. Agora, eu já estou no ponto dos ajustes no institucional.

Não sei o que houve, pois não fiz mais edições nas abas cabeçalho, ou base...

Wagner, também não deu não, mas acredito que seja do navegador mesmo. Baixei o projeto pronto que o professor disponibiliza no início de cada aula e está dando esse mesmo "erro".

José, suas tags meta estão corretas?

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Tipo isso?

Dei uma pesquisada aqui, e to suspeitando que tenha mais relação com isso, do que com as margins e o padding que aplicamos nesta aula.

Eu testei comentar, mais precisamente, a última destas linhas que compartilho aqui em cima, e bagunçou (gerou rolagem lateral, novamente) no Chrome. Vi esta pergunta aqui: https://pt.stackoverflow.com/questions/174735/responsividade-diferente-entre-navegadores-webkit-mozilla

O pessoal tá falando em bootstrap, mas a confusão é semelhante, e a reposta aponta pro viewport. Agora, meu problema sumiu. Mas to curioso, porque não sei bem o que aconteceu, se devo dar preferência a usar um navegador pra testar responsividade e ponto final. Me diz aí como desenrolou, por favor.

Fala Wagner, tudo bem?

Desculpe pela demora, a Covid me pegou aqui e só agora que estou voltando aos estudos.

Eu modifiquei as tags mas continuou na mesma.

Já testei em no Chrome, Edge, IE e no Firefox, e com exceção do IE( que não rodou os CSS's da página) o restante dos navegadores deram o mesmo resultado.

Abri o projeto em outro computadores e a mesma coisa.

Mínima ideia do porque está ficando diferente do professor.