Oii pessoal, boa noite. Sempre depois que eu faço as aulas e aplico tudo no site da Barbearia eu também aplico os conceitos em um site que estou criando como forma de praticar. Acontece que no da barbearia está tudo OK mas no meu outro depois que fiz algumas alterações e coloquei o mapa a parte da section principal ficou centralizada e não sei como fazê-la voltar a ocupar toda largura. Ficou aquela linha branca também entre o banner e ela. Alguém pode me orientar a como ajustar isso por favor?
/*CSS comum a todas as páginas - Cabeçalho e Rodapé */
body {
font-family: 'Montserrat', sans-serif;
}
header {
background: #655D8A;
padding: 20px 0;
}
.caixa {
position: relative;
width: 940px;
margin: 0 auto;
}
nav {
position: absolute;
top: 10px;
right:10px;
}
nav li {
display: inline;
margin: 0 0 0 150px;
}
nav a {
text-transform: uppercase;
color: #FDCEB9;
font-weight: bold;
font-size: 22px;
text-decoration : none;
}
nav a:hover {
color: #D885A3;
text-decoration: underline;
}
footer {
text-align: center;
background: #D885A3;
padding: 40px 0;
}
.copyright {
color: #FFFFFF;
font-size: 13px;
margin: 20px 0 0;
}
main {
}
/* css da home */
.banner {
width: 100%;
}
.titulo-principal {
text-transform: uppercase;
text-align:center;
font-weight: bold;
font-size: 2em;
margin: 0 0 1em;
clear: left;
}
.principal {
padding: 3em 0;
background: linear-gradient(#655D8A, #7897AB);
margin: 0 auto;
width: 940px;
font-size: 2em;
}
.principal p {
margin: 0 0 1em;
color: #000000;
}
.principal strong {
font-weight: bold;
}
.principal em {
font-style: italic;
}
.mapa {
padding: 3em 0;
background: linear-gradient(#7897AB, #FDCEB9);
}
.mapa-conteudo {
width: 940px;
margin: 0 auto;
}
.mapa p {
margin: 0 0 2em;
text-align: center;
}
.beneficios {
padding: 3em 0;
background: linear-gradient(#FDCEB9, #D885A3);
}
.conteudo-beneficios {
width: 640px;
margin: 0 auto;
}
.lista-beneficios {
width: 40%;
display: inline-block;
vertical-align: top;
}
.itens{
line-height: 1.5;
}
.itens:nth-child(2n) {
font-weight: bold;
}
.itens:before {
content: "★";
}
.imagem-beneficios {
width: 40%;
}