Content passes above the "header" when scrolling page;

Question

I have a header fixed, and just below I have a Section, that this the problem, when scrolling the page the content of Section, goes over the content of header, and my intention was for it to pass below the header, disappearing the content that passes.

* {
  padding: 0;
  margin: 0;
}
header {
  width: 100%;
  background-color: #009688;
  height: 65px;
  color: white;
  position: fixed;
  top: 0
}
.container-logo {
  height: 60px;
  width: 35%;
  float: left;
  text-align: center;
  margin-top: 2.5px;
}
.container-logo span {
  display: none;
}
.container-menu {
  height: 60px;
  width: 64%;
  float: right;
  margin-top: 1px;
}
.container-menu nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.3em;
  margin-top: 15px;
  float: right;
  margin-right: 5%;
}
.container-menu nav ul li {
  display: inline;
}
.container-menu nav ul li a {
  padding: 5px 20px;
  display: inline-block;
  position: relative;
  color: #EDEDED;
  text-decoration: none;
  font-size: 1.2em;
}
.container-menu > nav ul li a {
  position: relative;
  color: #EDEDED;
  text-decoration: none;
}
.container-menu > nav ul li a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #EDEDED;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.container-menu > nav ul li a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.menu-icon {
  margin-bottom: 7px;
  margin-right: 8px;
}
.main {
  width: 100%;
  /*1366 px */
  height: 580px;
  position: relative;
  top: 65.5px;
  text-align: center;
  border-bottom: 1px solid;
}
.apresentation {
  text-align: center;
  width: 100%;
  /* 1366 px */
  position: relative;
}
.apresentation h1 {
  padding-top: 100px;
  font-size: 3.5em;
  color: #009688;
  text-shadow: #EDEDED 1px -1px 2px, #EDEDED -1px 1px 2px, #EDEDED 1px 1px 2px, #EDEDED -1px -1px 2px;
}
.contact {
  width: 100%;
  height: 580px;
  border-bottom: 1px solid;
}

<header>
  <div class="container-logo">
    <h1>Logo</h1>
    <span><a href="#"><img src="img/menu.svg" alt="Menu"></a></span>
  </div>
  <div class="container-menu">
    <nav>
      <ul>
        <li>
          <a href="#">
            <img class="menu-icon" src="img/home.svg">Início</a>
        </li>
        <li>
          <a href="#">
            <img class="menu-icon" src="img/about.svg">Sobre</a>
        </li>
        <li>
          <a href="#">
            <img class="menu-icon" src="img/code.svg">Trabalhos</a>
        </li>
        <li>
          <a href="#">
            <img class="menu-icon" src="img/mail.svg">Contato</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

<section class="main">
  <div class="apresentation">
    <h1>Olá! Seja bem vindo ao meu espaço.</h1>
    <h2>Sou estudante de sistemas de informação!!</h2>

  </div>
</section>

<section class="contact">
  <form>
    <fieldset>

    </fieldset>
  </form>
</section>

Note that when scrolling the page the content passes above the header.

Answer 1

You have to add one z-index to the header so this problem doesn’t happen. For example:

header {
    width: 100%;
    background-color: #009688;
    height: 65px;
    color: white;
    position: fixed;
    top: 0;
    z-index: 9; /* Adiciona esta propriedade */
}

Example in jsFiddle: http://jsfiddle.net/kp5qkxf7/

About the z-index

The estate z-index determines the "stacking level" of an HTML element. The "stacking level" - Refers to the position of the element on the Z axis (as opposed to the X axis or Y axis). A value z-index higher than > 0, means that the element will be closer to the top in the stacking order. This stacking order occurs perpendicularly to the screen (or display window).