Changing CSS of one element effects other element outside the div - html

Question

Whenever i try to move separator up or down, the element h1 above .separator class starts moving along with the separator. Is there any easy way to get rid of this issue?
Below is my HTML/CSS Code
.banner img {
width: 100%;
height: 100%;
}
.banner {
position: relative;
margin: -0.6%
}
.OverLay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.OverLayContent {
width: 100%;
height: 100%;
display: table;
}
.overLayDescription {
width: 70%;
margin: 0 auto;
}
.OverLayText {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.OverLayText h1 {
margin-bottom: 5%;
color: #FFF;
font-size: 120px;
/*border-bottom: 2px solid #15a4fa;*/
}
.separator {
margin: 0 auto;
width: 50%;
background-color: #15a4fa;
height: 2px;
margin-bottom: 10.4%;
}
.OverLayText a {
color: #FFF;
border: 1px solid #15a4fa;
padding: 10px;
}
.OverLayText p {
color: #FFF;
margin-top: 2%;
margin-bottom: 3%;
}
.OverLayContent {
position: relative;
}
<div class="banner">
<img src="http://cometoart.com/wp-content/uploads/2016/03/pojo-placeholder-2.png" />
<div class="OverLay">
<div class="OverLayContent">
<div class="OverLayText">
<h1>STRICT</h1>
<dir class="separator"></dir>
<p>STRICT is a responsive theme with a a clean and minimal look.</p>
Call to action
</div>
</div>
</div>
</div>

Answer 1

Just because you are using .OverLayText to vertically-align:middle;.

Answer 2

.banner img {
width: 100%;
height: 100%;
position: relative;
}
.banner {
position: relative;
margin: -0.6%
}
.OverLay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.OverLayContent {
width: 100%;
height: 100%;
display: table;
}
.overLayDescription {
width: 70%;
margin: 0 auto;
}
.OverLayText {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
vertically-align:middle;
}
.OverLayText h1 {
margin-bottom: 5%;
color: #FFF;
font-size: 120px;
/*border-bottom: 2px solid #15a4fa;*/
}
.separator {
/*margin: 0 auto;*/
width: 50%;
background-color: #15a4fa;
height: 2px;
/*top: 80%;*/
position: relative;
margin: auto;
text-align: center;
display: block;
}
.OverLayText a {
color: #FFF;
border: 1px solid #15a4fa;
padding: 10px;
}
.OverLayText p {
color: #FFF;
margin-top: 2%;
margin-bottom: 3%;
}
.OverLayContent {
position: relative;
}
<div class="banner">
<img src="http://cometoart.com/wp-content/uploads/2016/03/pojo-placeholder-2.png" />
<div class="OverLay">
<div class="OverLayContent">
<div class="OverLayText">
<h1>STRICT</h1>
<dir class="separator"></dir>
<p>STRICT is a responsive theme with a a clean and minimal look.</p>
Call to action
</div>
</div>
</div>
</div>