I need to sort the placement of this menu the footer is totally out of color, the black color is above it, the positioning of texts and images are OK, however the CSS elements and even the body is out of position
/* efeito dentro do corpo, definido fonte e tamanho da margin em 0. */
body {
margin: 0;
font-family: Trebuchet MS;
background: #f7f7f7;
}
/* denindo o header com tamanho 100 %, e a cor de fundo Azul, header fixo */
header {
width: 100%;
min-height: 50px;
position: fixed;
top: 0;
right: 0;
left: 0;
background: #2c3e50;
}
/* cancelando o checkbox, pois o mesmo foi usado na função do icon, assim deixei invisivel ao usuario */
#btn-menu {
display: none;
}
/* definindo o icon , com tamanho de altura, largura e espaçamento */
header label {
display: none;
width: 40px;
height: 30px;
padding: 10px;
}
/* para quando passar o mouse */
header label:hover {
cursor: pointer;
background: rgba(0, 0, 0, 0.3);
}
.menu ul {
margin: 0;
list-style: none;
padding: 0;
display: flex;
}
/*Definindo proporção de crescimento de cada elemento*/
.menu li {
text-align: right;
}
/*efeito de mouse, quando passar o mouse muda de cor*/
.menu li:hover {
background: rgba(0, 0, 0, 0.3);
}
.menu li a {
display: block;
padding: 15px 20px;
color: #fff;
text-decoration: none;
}
.wrapper {
width: 96%;
max-width: 1200px;
margin: 0 auto;
padding: 0px 2%;
}
#img-menu img {
width: 100%;
}
#img-menu {
max-height: 500px;
overflow: hidden;
}
/*Cor letras*/
p,
h1,
h2,
h3,
h4 {
/*color:#999;*/
}
/*selecionando barra2*/
#selling-points {
margin-top: 60px;
}
#selling-points li {
float: left;
width: 23%;
padding: 1%;
text-align: center;
list-style-type: none;
line-height: 1.6 em;
}
#selling-points:after {
display: block;
content: "";
clear: both;
}
/*definindo cor do footer*/
/*
main{
padding: 20px;
}*/
@media (max-width: 768px) {
/*Header estilo*/
header label {
display: block;
}
.menu {
/*tamanho, cor e posição Barra Lateral*/
position: absolute;
background: #2c3e50;
/*tamanho barra lateral*/
width: 50%;
margin-left: -70%;
/*tempo de transição da barra*/
transition: all 0.5s;
}
/*Definindo li central, ou seja, barra central como barra lateral*/
.menu ul {
flex-direction: column;
}
/*cor do traçado embaixo dos topicos que são links diretos*/
.menu li {
text-align: left;
flex-grow: 1;
border-top: 1px solid #fff;
font-family: Trebuchet MS;
}
#btn-menu:checked ~ .menu {
margin: 0;
}
}<html lang="es">
<head>
<title>Header</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<header>
<input type="checkbox" id="btn-menu">
<label for="btn-menu">
<img src="icones/icon-menu.png" alt="" width="35" height="32">
</label>
<nav class="menu">
<ul>
<li><a href="">Inicio</a>
</li>
<li><a href="">Agua</a>
</li>
<li><a href="">APS</a>
</li>
<li><a href="">UNIP</a>
</li>
</ul>
</nav>
</header>
<div id="img-menu">
<img src="Imagem/Menu.png" alt="banner">
</div>
<main class="wrapper">
<section id="selling-points">
<ul>
<li>
<img src="icones/icon1.png" alt="selling-points" width="104" height="98">
<h3>Titulo</h3>
<p>Os três jogadores com mais de 23 anos que disputarão as Olimpíadas ainda são um mistério.</p>
</li>
<li>
<img src="icones/icon2.png" alt="selling-points" width="104" height="98">
<h3>Agua</h3>
<p>Os três jogadores com mais de 23 anos que disputarão as Olimpíadas ainda são um mistério.</p>
</li>
<li>
<img src="icones/icon3.png" alt="selling-points" width="104" height="98">
<h3>Water</h3>
<p>Os três jogadores com mais de 23 anos que disputarão as Olimpíadas ainda são um mistério.</p>
</li>
<li>
<img src="icones/icon4.png" alt="selling-points" width="104" height="98">
<h3>Cartola</h3>
<p>Os três jogadores com mais de 23 anos que disputarão as Olimpíadas ainda são um mistério.</p>
</li>
</ul>
</section>
</main>
<footer>
<div class="wrapper">
<ul>
<li>
<h4>Titulo Footer</h4>
</li>
<li>(11)98755-6589</li>
<li>[email protected]</li>
<li>Ferraz de Vasconcelos</li>
<li>Infelizmente trabalhando de sabado</li>
</ul>
<ul>
<li>
<h4>Titulo dois</h4>
</li>
<li>(11)98755-6589</li>
<li>[email protected]</li>
<li>Ferraz de Vasconcelos</li>
<li>Infelizmente trabalhando de sabado</li>
</ul>
<ul>
<li>
<h4>Titulo Tres</h4>
</li>
<li>(11)98755-6589</li>
<li>[email protected]</li>
<li>Ferraz de Vasconcelos</li>
<li>Infelizmente trabalhando de sabado</li>
</ul>
<ul>
<li>
<h4>Titulo Quatro</h4>
</li>
<li>(11)98755-6589</li>
<li>[email protected]</li>
<li>Ferraz de Vasconcelos</li>
<li>Infelizmente trabalhando de sabado</li>
</ul>
<div id="copyright">© 2016 GJVM; Todos os direitos reservados; Trabalho Unip.
</div>
</div>
</footer>