为什么flexbox中的前两个元素与具有相同css的其他元素不同

Question

The first two elements inside my flexbox container containing my posts from wordpress float around 10px higher than the rest. They all have the same css. I'm using PHP to get the posts from wordpress. Its only on the top row that it does this. As you can see from the photo the same template and post format is used lower on the page and it does not have this issue. Please help.

I have already tried commenting parts of the code like the read more button or the icons to see if maybe margins or padding inside the post container is doing it but its not. I've tried setting a height on the flexbox container to 930px the exact height to stop it floating - that hasnt worked. This is after setting no margins on the posts but that still hasn't worked - they were previously 5px.

This is the html template for each post inside the post loop that has the standard post format. Each post: standard and image follow the css with the 'standard' in the class names and the quote and video post format follow the classes with 'quote' in them.

 <article id="grid-post-<?php the_ID(); ?> " <?php post_class(); ?>>
   <header class="grid-quote-entry-header">

<div class=" grid-quote-post-container">
  <div class="grid-quote-icon-container">
    <i class="fas fa-video"></i>
  </div>

  <div class="grid-standard-title-container">
    <h2 class="grid-standard-title"><?php the_title(); ?></h2>
 </div>

   <div class="grid-standard-date-container">
     <h5 class="grid-standard-date"><?php the_time('d/m/y'); ?></h5>
   </div>

   <div class=" grid-button" id="video-button">
    <a href="<?php the_permalink(); ?>" class="btn"><button><?php _e('Read More');?></button></a>
   </div>






 </div>


    </header>
  </article>

HERE IS THE POST FORMAT TEMPLATE FOR THE VIDEO AND QUOTE POSTS:

 <article id="grid-post-<?php the_ID(); ?> " <?php post_class(); ?>>
    <header class="grid-quote-entry-header">

<div class=" grid-quote-post-container">
   <div class="grid-quote-icon-container">
    <i class="fas fa-video"></i>
  </div>

  <div class="grid-standard-title-container">
    <h2 class="grid-standard-title"><?php the_title(); ?></h2>
  </div>

  <div class="grid-standard-date-container">
    <h5 class="grid-standard-date"><?php the_time('d/m/y'); ?></h5>
  </div>

  <div class=" grid-button" id="video-button">
    <a href="<?php the_permalink(); ?>" class="btn"><button><?php _e('Read More');?></button></a>
  </div>






</div>


   </header>
 </article>

HERE IS INDEX PAGE

<div id="primary" class="content-area">
  <main id="main" class="site-main" role="main">
    <div class="grid-post-loop-container exhale-posts-container">
      <div class="grid-whole-container">



<?php

if(have_posts() ):

   echo '<div class="page-limit" data-page="/'. exhale_check_paged() 
 .'">';

  while( have_posts() ): the_post();
     get_template_part('template-parts/gridcontent', get_post_format() 
);

  endwhile;

  echo '</div>';

endif;

?>

</div>

</div>




  </main>
</div>

HERE IS THE CSS:

 .grid-whole-container{
     display: inline;
     flex-wrap: wrap;
     flex-direction: row;
     width: 100%;



      }

 .grid-standard-post-container {
   width: 32%;
   flex: 100%;
   height: 300px;
   -webkit-box-shadow: 10px 10px 19px -5px rgba(0,0,0,0.75);
   -moz-box-shadow: 10px 10px 19px -5px rgba(0,0,0,0.75);
   box-shadow: 10px 10px 19px -5px rgba(0,0,0,0.75);
   float: left;



 }

 .grid-standard-post-container:hover {

 }

 .grid-standard-title-container {
   width: 80%;
   margin-left: auto;
   margin-right: auto;

 }

 .grid-standard-title {
   font-family: coolvetica;
   text-transform: uppercase;
   color: white;
   text-align: center;
   letter-spacing: 3px;
   text-shadow: 2.5px 3px black;
   font-size: 27px;
   position: relative;
   top: 80px;

 }

 .grid-standard-date-container {
   width: 30%;
   margin-left: auto;
   margin-right: auto;

 }

 .grid-standard-date {
   letter-spacing: 6px;
   color: black;
   font-family: coolvetica;
   font-size: 13px;
   text-align: center;
   position: relative;
   top: 60px;
 }

 .grid-button button {
   width: 50%;
   margin-left: 25%;
   margin-right: 25%;
   position: relative;
   top: 90px;
   background: transparent;
     background-repeat:no-repeat;
     border: none;
     cursor:pointer;
     overflow: hidden;
     outline:none;
   font-family: coolvetica;
   text-transform: uppercase;
   color: white;
   letter-spacing: 7px;

 }

 .grid-load-more {
   margin-top: 100px;
 }

 /* INDEX GRID LAYOUT - QUOTE                  ========================================================================     ============================= */

 .grid-quote-post-container {
   width: 32%;
   flex: 100%;
   height: 300px;
   -webkit-box-shadow: 10px 10px 19px -5px rgba(0,0,0,0.75);
   -moz-box-shadow: 10px 10px 19px -5px rgba(0,0,0,0.75);
   box-shadow: 10px 10px 19px -5px rgba(0,0,0,0.75);
   float: left;
   background-color: #aecfd7;
 }

 .grid-quote-icon-container {
   color: white;
   font-size: 60px;
   text-align: center;
   width: 30%;
   margin-left: auto;
   margin-right: auto;
   margin-top: 30px;
  margin-bottom: -70px;
 }

Expected that these divs would all act the same as they all have the same css but top row floats up. Please help.

This is what it looks like.The first two should not float up like that