Changing CSS of one element effects other element outside the div
<p>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?</p>

<p><strong>Below is my HTML/CSS Code</strong></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="banner"&gt;
  &lt;img src="http://cometoart.com/wp-content/uploads/2016/03/pojo-placeholder-2.png" /&gt;
  &lt;div class="OverLay"&gt;
    &lt;div class="OverLayContent"&gt;
      &lt;div class="OverLayText"&gt;
        &lt;h1&gt;STRICT&lt;/h1&gt;
        &lt;dir class="separator"&gt;&lt;/dir&gt;
        &lt;p&gt;STRICT is a responsive theme with a a clean and minimal look.&lt;/p&gt;
        &lt;a href="#"&gt;Call to action&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>