Elements moving around for some unknown reason - html

Question

Whenever I change the id of the first subheading from aulas_subheading_2 to aulas_subheading_1. Some strange things happen to my layout, the aulas_heading_1 heading seems to disappear!
It goes from this:
To this:
I inspected the elements with firebug and identified that they are behind the divider, the aulas_heading1_band, which is in position:relative
What's going on here?
The relevant markup:
HTML
<section id="aulas_container">
<div id="aulas_container_top">
<h1 id="aulas_heading_1"><span class="highlight1">Aulas de Inglês</span></h1>
<h2 id="aulas_subheading_2">Práticas Imersivas</h2>
<div id="aulas_heading_band_1"></div>
</div>
<div id="aulas_container_bottom">
<h1 id="aulas_heading_1">Aulas</h1>
<h2 id="aulas_subheading_2"><span class="highlight2">com Professores Nativos</span></h2>
<div id="aulas_subheading_band">a</div>
</div>
CSS
#aulas_container {
background-position: center top;
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
height: 910px;
}
#aulas_container_top {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
height: 50%;
position: relative;
background-image: url("http://i.imgur.com/6Tv6r7F.png");
}
#aulas_container_bottom {
height: 50%;
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
background-image: url("http://i.imgur.com/YfxsPWu.jpg");
}
/* */
/* TEXT */
/* */
#aulas_heading_1 {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
font-size: 50px;
text-align: center;
color: white;
}
#aulas_subheading_1 {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
text-align: center;
vertical-align: bottom;
color: white;
}
#aulas_heading_2 {
color: black;
}
#aulas_subheading_2 {
font-size: 60px;
text-align: center;
vertical-align: bottom;
color: black;
}
/* */
/* DIVIDERS AND SHAPES */
/* */
#aulas_heading_band_1 {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
height: 35%;
position: relative;
top: -40%;
background-color: black;
}
*#aulas_heading_band_1:before {
content: "";
position: relative;
top: -30%;
background-color: white;
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
height: 50%;
display: block;
position: relative;
}
#aulas_subheading_band {
background-color: white;
height: 10%;
position: relative;
bottom: 0%;
}
#aulas_subheading_2_band{
background-color: $binaryColor0;
height: 5%;
}