Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Padding header x footer desalinhado

Boa tarde, gente!

Estou fazendo o desafio de criar a página do currículo nesse projeto do figma e optei por deixar sem a imagem que estava nas outras páginas, porém retirando a imagem o padding adicionado no header (.cabecalho) está deslocando o footer e eu não consigo fixar ele novamente. Já tentei de várias formas e sem sucesso... consegui apenas modificando o menu (retirando os paddings e deixando ele centralizado), mas gostaria de saber se existe uma forma de manter o menu como estava - com os paddings colocados no curso e deixar o rodapé posicionado de forma correta novamente.

não consegui anexar as imagens :(

Obrigada desde já!

Atenciosamente,

Rackel

@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&display=swap');

:root {
    --cor01: #000000;
    --cor02: #F6F6F6;
    --cor03: #22D4FD;
    --cor04: #272727;

    --fonte-principal: 'Krona One', sans-serif;
    --fonte-secundaria: 'Montserrat', sans-serif;
}

* {
    margin: 0;
    padding: 0;

}

body {
    height: 100vh; 
    box-sizing: border-box;
    background-color: var(--cor01);
    color: var(--cor02);
}


.cabecalho {
    padding: 5% 15%;
}




.cabecalho__menu {
    display: flex;
    gap: 80px;

}


.cabecalho__menu__links {
    text-decoration: none;
    color: var(--cor03);
    font-family: var(--fonte-secundaria);
    font-weight: 600;
    font-size: 1.5em;
}

.container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: auto;
    padding: 5% 15%;
}

#curriculo {
    justify-content: center;
}


.container__conteudo {
    width: 615px;
    display: flex;
    flex-direction: column;

}


.container__conteudo__titulo {
    font-family: var(--fonte-principal);
    font-weight: normal;
    font-size: 2.3em;
    line-height: 56px;
    padding-bottom: 40px;

}

.titulo_destaque {
    color: var(--cor03);
}

.container__conteudo__texto {
    font-family: var(--fonte-secundaria);!
    font-size: 1.5em;
    line-height: 36px;
    font-weight: 400;
    text-align: justify;
    padding-bottom: 40px; 
}

.container__conteudo__subtitulo {
    color: var(--cor02);
    font-family: var(--fonte-principal);
    text-decoration: underline;
    font-weight: 400;
    font-size: 1.5em;
    padding-bottom: 15px;

}

.container__lista {
    display: flex;
    flex-direction: column;
    text-align: justify;
    list-style-type: circle;
    padding: 0px 0px 40px 22px;
    font-family: var(--fonte-secundaria);
    font-size: 1.5em;
    line-height: 36px;
}


.destaque__lista {
    color: var(--cor03);
}

.container__lista__indent {
    font-size: .8em;
    list-style-type: none;
}

.container__botoes {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 32px;


}

.container__botoes__subtitulo {
    text-align: center;
    color: var(--cor02);
    font-family: var(--fonte-principal);
    font-weight: 400;
    font-size: 1.5em;
}

.container__botoes__link {
    display: flex; 
    justify-content: center; 
    gap: 16px; 
    width: 378px;
    border: 2px solid var(--cor03);
    text-decoration: none;
    color: var(--cor02);
    text-align: center;
    font-family: var(--fonte-secundaria);
    font-size: 1.5em;
    font-weight: 600;
    padding: 16px 0; 
    border-radius: 8px;

}

.container__botoes__link:hover {
    background-color: var(--cor04);
}


.rodape {
    position: relative;
    background-color: var(--cor03);
    padding: 20px;
    text-align: center;
    font-family: var(--fonte-secundaria);
    font-size: 1.5em;
    font-weight: 400;
    color: var(--cor01);
}


.rodape__destaque:hover { 
    color: var(--cor02);
    font-weight: 800;
}
2 respostas

É só você remover o "position: relative;" do seu footer.

solução!

Olá boa noite!

normalmente quando se usa padding ele aumenta o tamanho do seus itens o que faz as vezes sair do tamanho da pagina que vc colocou como 100vw (ou seja 100% da tela). eu começaria trocando os padding para numeros em px ou em.

da uma lida nesse artigo ajuda muito.