Ajuda no Position das tags | HTML5 e CSS3 II: Turbinando as suas páginas

Olá pessoal!

Afim de treinar um pouquinho o que aprendi no curso, estou desenvolvendo uma página e estou tendo bastante dificuldade no posicionamento dos elementos.

A tag header funciona certinho, entretanto quando incluo seções no meu código tudo fica bagunçado. Tenho certeza que o problema é o posicionamento mas não consigo entender onde estou errando...

Se puderem verificar o código abaixo eu agradeço =)

Seguem abaixo meu código HTML5 e CSS3:

<!DOCTYPE html>

<html lang="pt-br">

    <head>
        <meta charset="utf-8">
        <title>Loja</title>

        <link rel="icon" href="img/favicon.png">
        <link rel="stylesheet" href="css/estilos.css">

        <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    </head>

    <body>

        <header>
            <div class="container">
                <nav class="menu-opcoes">
                    <ul>
                        <li><a href="#">INÍCIO</a></li>
                        <li><a href="#">MEUS PEDIDOS</a></li>
                        <li><a href="#">MEU CADASTRO</a></li>
                        <li><a href="#">CENTRAL DE ATENDIMENTO</a></li>
                    </ul>
                </nav>

                <h1 class="logo">
                    <img src="img/logo.png" alt="logo">
                </h1>

                <form class="busca">
                    <input type="search" id="campo-busca">
                    <button type="submit" class="btn-buscar">Buscar</button>    
                </form>

                <button class="btn-carrinho" type="submit" ><a href="#">Meu carrinho</a></button>

                <nav class="menu-principal">
                    <ul>
                        <li><a href="#">Infantil</a></li>
                        <li><a href="#">Festas</a></li>
                        <li><a href="#">Casa</a></li>
                        <li><a href="#">Moda</a></li>
                        <li><a href="#">Informática</a></li>
                        <li><a href="#">Esportes</a></li>                        
                    </ul>
                </nav>    

                <img src="img/banner-rotativo.png" alt="Banner rotativo">

                <img src="img/msg-loja.png" alt="Condições">
            </div>
        </header>

        <main>
            <section class="destaque">
                <div class="container">                
                    <h2 class="titulo-secao">Produtos em Destaque</h2>
                </div>
            </section>    
        </main>


        <!--footer>

        </footer-->        

    </body>

</html>

/*VARIÁVEIS*/
.sombra-padrao,
.btn-carrinho {
  box-shadow: 0 2px 6.65px 0.35px rgba(0, 0, 0, 0.3);
}

/*Geral*/
body {
  font-family: 'Open Sans', sans-serif;
}
.container {
  width: 940px;
  margin: 0 auto;
}
.titulo-secao {
  font-size: 1.5em;
  text-align: left;
  color: #179CBD;
  border-bottom: 1px solid #80E8CD;
}


/*Header*/
header {
  background: #FFFFFF;
  height: 11.5em;
  width: 100%;
  position: absolute;
}
header .container {
  position: relative;
}
.menu-opcoes {
  font-size: 0.7em;
  border-bottom: 1px solid #80E8CD;
  width: 100%;
}
.menu-opcoes ul {
  padding-left: 0;
}
.menu-opcoes li {
  display: inline-block;
}
.menu-opcoes a {
  color: #179CBD;
  text-decoration: none;
  padding-right: 2em;
}
.menu-opcoes a:hover {
  text-decoration: underline;
}
.logo,
.busca,
.btn-carrinho {
  display: inline-block;
  vertical-align: middle;
  width: 33%;
}
.busca {
  overflow: hidden;

}
.busca input {
  border: 1px solid #CCC;
  border-bottom-color: #aaa;
  border-right-width: 0;
  border-radius: 5px 0 0 5px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
  color: #555;
  height: 1.7em;
  padding: 0 0.16em;
  float: left;
  -webkit-appearance: none;
}
.busca button {
  background: #f0f0f0;
  background: linear-gradient(white, white 50%, #eee);
  border: 1px solid #CCC;
  border-bottom-color: #aaa;
  border-radius: 0 5px 5px 0;
  color: #777;
  font-size: 90%;
  line-height: 1.667em;
  height: 1.98em;
  padding: 0 0.5em;
  text-align: center;
  text-transform: lowercase;
  float: left;
}
.busca button:hover {
  color: #179CBD;
}
.btn-carrinho {
  height: 2.5em;
  background: #179CBD;
  border: 0;
  font-size: 1em;
  -webkit-border-radius: 0.5em;
  -o-border-radius: 0.5em;
  border-radius: 0.5em;
}
.btn-carrinho a {
  color: #FFFFFF;
  text-decoration: none;
}
.btn-carrinho a:hover {
  color: #000;
}
.menu-principal {
  position: absolute;
  top: 11em;
  width: 100%;
  height: 3.5em;
  background: #179CBD;
}
.menu-principal li {
  position: relative;
  list-style: none;
  text-align: center;
  display: inline-block;
  width: 15%;
  border-right: 1px solid #FFFFFF;
}
.menu-principal li:last-child {
  border-right: 1px solid #179CBD;
}
.menu-principal a {
  color: #FFFFFF;
  text-decoration: none;
  font-size: 0.8em;
  padding: 1.5em;
}
.menu-principal a:hover {
  background-color: #80E8CD;
  color: #000;
}

/*Main*/
main {
  position: relative;
}
.destaque {
  color: white;
  height: 200px;
  background: red;
  width: 100%;
  position: absolute;
}
.destaque-produtos {
  color: white;
  height: 330px;
  background: yellow;
}

Olá Bruna, Particularmente eu tomo MUITO cuidado ao utilizar a propriedade "position". Primeiro porque não sou desenvolvedor font-end e não posso lhe dizer exatamente quando e como utilizar. Bom, fiz alguns testes e acho que isso aqui pode te ajudar: Coloquei o "header" como position relative, e aumentei a altura para 15.5em.

header {
  background: #FFFFFF;
  height: 15.5em;
  width: 100%;
  position: relative;
}

Outra alteração que eu fiz foi na classe "destaque". Eu não entendi porque estava com position absolute, então retirei. Assim você pode inserir outras seções, e nenhuma vai ficar em cima da outra.

.destaque {
  color: white;
  height: 200px;
  background: red;
  width: 100%;
}

Criei uma outra seção, para que fique mais claro o motivo de ter removido esse position:

CSS:
.outro-destaque {
  color: white;
  height: 200px;
  background: blue;
  width: 100%;
}

HTML:
...
<main>
    <section class="destaque">
        <div class="container">                
            <h2 class="titulo-secao">Produtos em Destaque</h2>
         </div>
    </section>    
    <section class="outro-destaque">
        <div class="container">                
            <h2 class="titulo-secao">Outros Produtos em Destaque</h2>
        </div>
    </section>  
</main>

Espero ter ajudado :)