Zoom in/out bagunça a página.

Oi Gustavo, tudo bem? Quando você usa medidas relativas como % para posicionar e dimensionar elementos, é natural que as coisas saiam um pouco do lugar, fiquem maiores ou menores dependendo da resolução do usuário.

Lembre sempre, medidas relativas são relativas a tela de quem abre sua página no momento. No geral, usar % não deveria afetar tanto, mas se você usar position absolute com % ai sim, algumas coisas podem sair totalmente para fora do planejado.

Talvez usar algo diferente de position possa solucionar o problema de bagunçar os elementos.

Olha, vou melhorar a duvida agora que posso compartilhar melhor o problema.

https://imgur.com/a/o0oJh

A imagem um representa como a página se comporta no meu monitor 1 e a segunda como se comporta no meu monitor 2. Como eu arrumo isso?

Segue o código: https://pastebin.com/g4Rxs4t9

Coloquei aqui porque quis compartilhar o código da página inteira, não só a parte que aparece na imagem. Queria algumas dicas do que fazer. Como por exemplo não usar absolute e controlar as coisas por outros comandos etc.

Agradeço se puder ajudar.

Ps: O CSS está no fim do html apenas pq coloquei tudo em uma página para compartilhar, no meu código está tudo certinho.

Oi Gustavo, há muito o que se revisar nesse seu código. Primeiro, você usa bastante o !important, e isso não é visto como uma boa prática.

Você usa position absolute em muitos lugares. O que fica mais complicado ainda de saber exatamente qual problema está acontecendo. Pelo que vi, mesmo resolvendo esse primeiro problema, um outro vai aparecer.

Pelo que vi, você também não está usando o bootstrap da forma que deveria ser utilizada. Você até usa as classes de grid, mas força o posicionamento com o absolute.

Você fez os cursos de HTML e CSS I e II aqui da plataforma? E o de Bootstrap, também?

Realmente, conforme Wanderson comentou o interessante é dar uma boa revisada nesse código. Tem muito que acertar e aplicar a falta da aplicação correta do bootstrap é muito importante.

Gustavo, se me permite, a dica é que, pelo que vi no seu layout, você não precisa usar positions de forma alguma. Use somente o grid do bootstrap que já resolve praticamente todos os seus problemas.

Dá um feedback pra gente aqui sobre as perguntas que de fiz.

No momento estou meio sem tempo de assistir as aulas, então venho tentando arrumar esse código e alguns outros que tenho.

Mas uma pergunta, mesmo não usando nenhum position em algum código, só movendo as coisas com padding e margin, ainda vejo que se eu troco a resolução da tela, o layout anda, muda e etc. Preciso realmente assistir mais a as aulas, uma hora dou o feedback pra vocês.

Por exemplo, tenho esse outro código aqui:

https://pastebin.com/YDykPGcY

Coloquei aqui novamente por conta do código ser bem grande. O layout na minha resolução tá ok, quando troco pra celular tá ok também, tudo bonitinho, mas quando eu passo ele pro meu segundo monitor, que é menor do que o primeiro, as coisas ficam todas estranhas, fora de posição, algumas coisas meio distorcidas etc. E nesse código não tem um position e não forcei nada com %, apenas usei o padding e margin pra mover as coisas pra onde eu desejava.

Gustavo, eu estava fazendo uma página em casa e percebi que acontecia o mesmo comigo quando colocava meu site em telas menores que meu monitor. Acontece que percebi que o que cagava tudo era o bendito padding. Por exemplo, eu fazia uma barra de navegação vertical, dentro dela colocava um UL com alguns LI. Definia o meu nav com width: 100%, e eu defini o padding: em, só não lembro o tamanho do texto. Eu sei que eu tive que tirar quase todos o padding-left e padding-right das minhas tags ou defini-las como box-sizing: border-box, porque senão ficava tudo cagado, aparecia opção de rolar pra direita e esquerda mesmo com width: 100% e overflow: hidden. Então descobri que o padding tava ultrapassando o width: 100%, por isso que ficava tudo bagunçado. Talvez você deva dar uma olhada nisso.