Html e css elementos transbordam(largura) a página

Pessoal, estou com uma problema quando adiciono o padding: 2% ou margin: 2% para elemento main. Acontece um transbordamento(largura) na página. Os elementos invadem a parte não visível na página e a barra de rolagem é adicionada automaticamente. Não estou conseguindo resolver o problema, gostaria de algumas dicas pra achar a solução. Pesquisei sobre overflow hidden e tentei utilizar, mas não resolveu. Desde já agradeço a atenção de todos.


Segue o código e imagem de fundo.

index.html (4,7,KB)

style.css (728,Bytes)

Bom dia @mmrosa, tudo bem? :slightly_smiling_face:

Você poderia postar seu código no https://jsbin.com/ ou similar e compartilhar o link?

1 curtida

Upei os arquivos no post. Pode ser assim??

Sim sem problemas, o erro acontece porque você está usando uma largura na tag body e header com uma unidade de medida relativa à tela width: 100vw, o certo é você usar width: 100%.

Espero ter ajudado! Abraços!

1 curtida

Nao vi os seus arquivos, mas acredito que se vocë colocar isso no seu codigo css, deve funcionar:

*, :before, :after {
box-sizing: border-box;
}

Abraços

1 curtida

Da uma olhada na minha resposta acima! :arrow_up::smiley:

1 curtida

Uou! Funcionou! Muito obrigada! :sweat_smile:

Por nada que isso, e para melhorar também a sua imagem, no css ao invés de usar background-size: 100% use: background-size: cover; :wink:

1 curtida