CSS div ficando atrás de outra div

Patrick Franco · 2 de setembro de 2019

Estou tentando fazer um site e estou com um problema com as divs. Fiz o <header> e depois do conteúdo do header fiz uma <section>(não sei se é o mais adequado mas foi o que fiz), o problema é que o conteúdo da <section> está ficando por trás do <header>. Veja na imagem:

Quando eu não coloco nenhuma propriedade na imagem, fica certo, a imagem não fica atrás do <header>, mas se eu mudar o tamanho, por exemplo, ela fica desse jeito aí..

Segue os códigos:

HTML

<!DOCTYPE html>
<html lang="PT-BR">
<head>
  <title>Astronich</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!----------------------------------------------------------------->
  <link rel="stylesheet" type="text/css" href="./css/style.css">
  <link rel="stylesheet" type="text/css" href="./css/fontImport.css">
  <link rel="icon" type="imagem/png" href="./favicon.ico"/>
  <!----------------------------------------------------------------->
  <script src="https://kit.fontawesome.com/8763e6d79f.js"></script>
</head>
<body>
  <header class="header">
    <main>
      <div class="headerContent">
        <div class="headerLogo">
          <a href="./index.html" alt="Astronich">
            <img src="./images/logoAstronich.png">
          </a>
        </div>
        <hr class="hr">
        <nav class="navigation">
          <ul>
            <li><a href="./index.html">INÍCIO</a></li>
            <li><a href="#">PROJETOS</a></li>
            <li><a href="#">CONTATO</a></li>
          </ul>
        </nav>
        <nav class="navigationSocialNetwork">
          <ul>
            <li><a href="#" alt="Facebook"><i class="fab fa-facebook-square"></i></a></li>
            <li><a href="#" alt="Instagram"><i class="fab fa-instagram"></i></a></li>
            <li><a href="#" alt="YouTube"><i class="fab fa-youtube"></i></a></li>
          </ul>
        </nav>
        <button class="buttonDiscord">DISCORD</button>
      </div>
    </main>
  </header>
  <section class="section1">
    <div class="section1Image">
      <img src="./images/socialgunLogo.png"/>
    </div>
    <div class="section1Description">
    </div>
  </section>
</body>
</html>

CSS

  *{
  margin: 0% ;
  padding: 0% ;
  border: 0px ;
  box-sizing: border-box ;
  -webkit-box-sizing: border-box ;
}

main{
  width: 1000px ;
  height: 100% ;
  margin: 0 auto ;
  float: left ;
  position: relative ;
}

body{
  font-size: inherit ;
  font-family: 'Source Sans Pro' ;
  background-color: #0D0D0D ;
}

input, select, iframe{
  border: none ;
  font-family: 'Source Sans Pro' ;
}

h1, h2, h3{
  margin: 0px;
  padding: 0px ;
}

ol, ul{
  list-style: none ;
}

a{
  text-decoration: none ;
  color: inherit ;
}

.header a:hover{
  color: #FF9500 ;
}

.header{
  width: 100% ;
  height: 80px ;
  overflow-x: auto ;
  background-color: #181818 ;
  position: absolute ;
  align-content: center ;
  text-align: center ;
  /**/
  display: flex ;
  flex-direction: row ;
  justify-content: center ;
  align-items: center ;
  overflow: hidden ;
  border-bottom: 0.1px solid #707070 ;
}

.headerContent{
  height: 80px ;
  width: 100% ;
  position: absolute ;
  text-align: center ;
  display: flex ;
  align-items: center ;
}

.buttonDiscord{
  border: none ;
  border-radius: 5px ;
  cursor: pointer ;
  font-family: 'Source Sans Pro' ;
  font-size: 15 ;
  padding: 12px 23px ;
  background: #FF9500 ;
  margin-left: 20px ;
  float: right ;
  text-decoration: none ;
}

.headerLogo img{
  width: 60px ;
  height: 60px ;
  float: left ;
}

.hr{
  height: 40px ;
  width: 1.1px ;
  border: 0.1px solid #707070 ;
  margin-left: 15px ;
  margin-right: 10px ;
}

nav{
  float: right ;
  position: relative ;
}

nav ul li{
  display: inline ;
  margin-right: 10px ;
  margin-left: 10px ;
  color: white ;
  font-size: 15 ;
}

.navigationSocialNetwork{
  float: right ;
  margin-left: 400px ;
}

.section1{
  background-color: #1D1D1D ;
  width: 100% ;
  height: 500px ;
}

.section1Image{
  background-color: red ;
  width: 200px ;
  height: 200px ;
}

.section1 img{
  width: 150px ;
  height: 150px ;
}