Почему первые два элемента во flexbox ведут себя не так, как другие, с одним и тем же CSS

Question

Первые два элемента в моем контейнере flexbox, содержащие мои сообщения из WordPress, плавают примерно на 10 пикселей выше, чем остальные.Все они имеют одинаковые CSS.Я использую PHP для получения сообщений из WordPress.Это только в верхнем ряду, что он делает это.Как вы можете видеть из фотографии, тот же шаблон и формат поста используются ниже на странице, и это не имеет этой проблемы.Пожалуйста помоги.

Я уже пробовал комментировать части кода, такие как кнопка «Читать далее» или значки, чтобы увидеть, возможно, это делают поля или отступы внутри почтового контейнера, но это не так.Я попытался установить высоту на контейнере flexbox равной 930px точной высоты, чтобы она не плавала - это не сработало.Это после того, как вы не установили поля на постах, но это все еще не сработало - раньше они были 5px.

Это HTML-шаблон для каждого сообщения в цикле сообщений, которое имеет стандартный формат сообщений.Каждый пост: стандарт и изображение следуют за css со «стандартом» в именах классов, а цитата и видео-формат следуют за классами с «цитатой» в них.

 <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>

ЗДЕСЬ ШАБЛОН ФОРМАТА ПОСТ ФОРМАТАДЛЯ ВИДЕО И ЦИТАТЫ ПОЗИЦИИ:

 <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>

ЗДЕСЬ ИНДЕКС СТРАНИЦА

<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>

ЗДЕСЬ 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;
 }

Ожидается, что все эти div'ы будут действоватьтак же, как все они имеют одинаковый CSS, но верхний ряд всплывает.Пожалуйста помоги.

Вот как это выглядит. Первые два не должны так всплывать