Entrar Ainda não tem acesso?
2
respostas

Página de contato ficou colada no lado esquerdo da tela com a exclusão dos elementos que estava dentro da main no css! como faço para deixar como a página do exemplo do projeto?

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS

por Amanda Carolina da Silva Negreiros
| 30.2k xp | 1 posts

body { font-family: 'Montserrat', sans-serif; }

header { background: #BBBBBB; padding: 20px 0; }

.caixa { position: relative; width: 940px; margin: 0 auto; }

nav { position: absolute; top: 110px; right: 0; }

nav li { display: inline; margin: 0 0 0 15px; }

nav a { text-transform: uppercase; color: #000000; font-weight: bold; font-size: 22px; text-decoration: none; }

nav a:hover { color: #C78C19; text-decoration: underline; }

.produtos { width: 940px; margin: 0 auto; padding: 50px 0; }

.produtos li { display: inline-block; text-align: center; width: 30%; vertical-align: top; margin: 0 1.5%; padding: 30px 20px; box-sizing: border-box; border: 2px solid #000000; border-radius: 10px; }

.produtos li:hover { border-color: #C78C19; }

.produtos li:active { border-color: #088C19; }

.produtos li:hover h2 { font-size: 34px; }

.produtos h2 { font-size: 30px; font-weight: bold; }

.produto-descricao { font-size: 18px; }

.produto-preco { font-size: 22px; font-weight: bold; margin-top: 10px; }

footer { text-align: center; background: url("bg.jpg"); padding: 40px 0; }

.copyright { color: #FFFFFF; font-size: 13px; margin: 20px 0 0; }

main {

}

form { margin: 40px 0;}

form label, form legend { display:block; font-size: 20px; margin: 0 0 10px; }

.input-padrao { display: block; margin: 0 0 20px; padding: 10px 25px; width: 50%; }

.checkbox { margin: 20px 0; }

2 respostas
por Amarildo Junior
| 56.4k xp | 16 posts

Olá, Amanda! Tudo bem? Bom.. no HTML você pode colocar todo o conteúdo da <main> dentro de uma tag <section> e adicionar uma classe a essa tag. E no CSS você adiciona um espaçamento externo a esquerda para a classe que você atribuiu, do tamanho que quiser..

HTML

<main>
    <section class="conteudo-contato">
        .
        .
        .
    </section>
</main>
}

CSS

.conteudo-contato{
    padding-left: 2em;
}
por Emily Antonia da Silva
| 12.3k xp | 1 posts

Olá, Amanda! Tudo bom? Tive essa mesma dúvida e consegui um resultado legal criando, no HTML, um

dentro da tag e adicionei uma classe a essa tag. No CSS apliquei uma margem.

HTML:

  <main>
            <section class="principal-contato">
            ...
            </section>
 </main>

CSS:

.principal-contato {
    margin: 2em;
}