Difficulties with css element positioning

1

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">&copy; 2016 GJVM; Todos os direitos reservados; Trabalho Unip.
      </div>
    </div>
  </footer>
    
asked by anonymous 09.05.2016 / 20:45

1 answer

0

The only idea I can give you is to help you at the moment and do the following. Right-click on your page where you want to modify it. On the right side of the screen, open a window with the code of your page ... see that as you move the mouse over the lines of codes it will indicate where is the content of that code including the same window at the bottom will appear the css used ...
ai friend and just have fun and go changing everything you find the exact place where the modification will agree as you want .. of course changing only in the window will not change in your schedule but will indicate the line where the catch is and where he ta .... I hope he has helped

    
10.05.2016 / 21:58