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.
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%.