title: H2 ignoring <div>s before that and Hover Bring border that change Other Elements' Position
body: <blockquote>
  </blockquote>
  <p>I have an h1 tag</p>
  <p>then one div (inside this div there is 4 more div)</p>
  <p>then another div(inside this div there is 2 image)</p>
  <p>then I want to add an h2 tag but for some reason, it is ignoring those 2 div on top and starting just after the h1 tag.
  how to fix this. If you see result images it will be clear. this is the first time I ask a question, please don't give me a negative mark. I am stuck with this problem for 50 minutes.</p>
  <p>--</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>.infoPastel {
    margin: 0px 0px 0px 17px;
    background-color: white;
    text-align: left;
    width: 180px;
    float: left;
    border-style: dotted;
    margin-left: 20px;
  }
  
  .infoPastelBody {
    background-color: pink;
    margin: 0px;
  }
  
  .pastelImg {
    float: left;
    margin: 4px;
    width: 100%;
    max-width: 385px;
    height: 100%;
    max-height: 480px;
  }
  
  #pastelImg {
    position: relative;
  }
  
  .pastelVideoText {
    padding: 0px;
    margin: 0px;
    background-color: blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="hidden" id="myPastelPage"&gt;
    &lt;h1&gt;I am Pastel&lt;/h1&gt;
    &lt;div&gt;
      &lt;div class="infoPastel"&gt;
        &lt;p&gt;&lt;b&gt;Name :&lt;/b&gt;&lt;/p&gt;
        &lt;p&gt;&lt;b&gt;Bate of Birth :&lt;/b&gt;&lt;/p&gt;
        &lt;p&gt;&lt;b&gt;Age :&lt;/b&gt;&lt;/p&gt;
        &lt;p&gt;&lt;b&gt;Species :&lt;/b&gt;&lt;/p&gt;
        &lt;p&gt;&lt;b&gt;Breed :&lt;/b&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="infoPastel infoPastelBody" style="border-right-style:double;"&gt;
        &lt;p&gt; Pastel&lt;/p&gt;
        &lt;p&gt; 10/11/2015&lt;/p&gt;
        &lt;p&gt; 4+&lt;/p&gt;
        &lt;p&gt; Feline&lt;/p&gt;
        &lt;p&gt; DLH&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="infoPastel" style="border-left-style:double;"&gt;
        &lt;p&gt;&lt;b&gt;Colour :&lt;/b&gt;&lt;/p&gt;
        &lt;p&gt;&lt;b&gt;Sex :&lt;/b&gt;&lt;/p&gt;
        &lt;p&gt;&lt;b&gt;Desexed :&lt;/b&gt;&lt;/p&gt;
        &lt;p&gt;&lt;b&gt;City Council :&lt;/b&gt;&lt;/p&gt;
        &lt;p&gt;&lt;b&gt;Owner :&lt;/b&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="infoPastel infoPastelBody"&gt;
        &lt;p&gt; Black&lt;/p&gt;
        &lt;p&gt; Female&lt;/p&gt;
        &lt;p&gt; Yes&lt;/p&gt;
        &lt;p&gt; Hume&lt;/p&gt;
        &lt;p&gt; Amin&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="pastelImg"&gt;
      &lt;img class="images pastelImg " id="pastelImg1" src="Images/Pastel1.jpeg" alt="2020"&gt;
      &lt;img class="images pastelImg " id="pastelImg2" src="Images/Pastel2.jpeg" alt="2020"&gt;
    &lt;/div&gt;
            &lt;h2 class ="pastelVideoText" &gt; this h2  tag ignoring the images and the div before&lt;/h2&gt;
            &lt;h2&gt;My Videos &lt;/h2&gt;&lt;!-- here I want my h2--&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/uFO58.jpg" rel="nofollow noreferrer">HTML code</a></p>
  <p><a href="https://i.stack.imgur.com/H1u2f.jpg" rel="nofollow noreferrer">CSS Code</a></p>
  <p><a href="https://i.stack.imgur.com/15dEb.jpg" rel="nofollow noreferrer">Result without hover</a></p>
  <p><a href="https://i.stack.imgur.com/15GEm.jpg" rel="nofollow noreferrer">Result After hover the h1 tag changed its position</a></p>