Две равные сетки отображают разные кросс-браузеры

Question

У меня странная проблема на моем WordPress сайте.У меня есть две страницы, которые структурно равны: первая - это страница постов, а вторая - страница с учебником.

Но по какой-то причине эти две страницы показывают разные результаты CSS-сетки в некоторых браузерах на ПК и MAC.Например, в Firefox я вижу правильный результат как на ПК, так и на MAC, но в Chrome на ПК только страница сообщений показывает правильный результат, а страница с учебником неверна, когда карточки отображаются друг под другом, а не рядом друг с другом.Но в Chrome на Mac обе страницы показывают правильный результат.

Когда я просматриваю инструменты разработчика в Chrome на ПК, я вижу, что <main> на странице сообщений имеет ширину 1024px, а на странице учебных пособий - только 800px.Чтобы лучше понять проблему, взгляните на две страницы страницу сообщений и страницу учебника

Я попытался очистить кеш как в браузерах, так и в самом WordPress.Но, похоже, ничего не помогает.И я не могу понять, что является причиной этой проблемы.

Страница сообщений

<?php get_header(); ?>
<main class="posts">
<h2>Blogg arkiv</h2>
<p>Kolla gärna igenom mitt arkiv</p>
<?php while( have_posts() ) : the_post();
?>

<div class="cards">
<?php echo '<div class="post-excerpt-picture">' . get_the_post_thumbnail() . '</div>'; ?>
<p class="post-excerpt-date">Publiserad den <?php the_date(); ?></p>
<a href="<?php the_permalink() ?>">                                 
<h3><?php the_title(); ?></h3></a>
<?php the_excerpt(); ?>
<button class="wp-block-button"><a class="wp-block-button__link" href="<?php the_permalink() ?>">Läs mer</a></button>
</div>

<?php

endwhile;
wp_reset_postdata();

?>
</main>
<div class="pageNumbers"><?php echo paginate_links(); ?></div>

<?php get_footer(); ?>

Страница учебника

<?php get_header(); ?>
<main class="tutorial">
<h2>Tutorial arkiv</h2>
<p>Kolla gärna igenom mitt arkiv med tips och trix inom fotografi och redigering</p>
<?php while( have_posts() ) : the_post();
?>

<div class="cards">
<?php echo '<div class="post-excerpt-picture">' . get_the_post_thumbnail() . '</div>'; ?>
<p class="post-tutorial-date">Publiserad den <?php the_date(); ?></p>
<a href="<?php the_permalink() ?>">                                 
<h3><?php the_title(); ?></h3></a>
<?php the_excerpt(); ?>
<button class="wp-block-button"><a class="wp-block-button__link" href="<?php the_permalink() ?>">Läs mer</a></button>
</div>

<?php

endwhile;
wp_reset_postdata();

?>
</main>
<div class="pageNumbers"><?php echo paginate_links(); ?></div>

<?php get_footer(); ?>

CSS

/* 3.2 ARCHIVE PAGES GRID LAYOUT */
/* -------------------------------------------- */
.posts,
.tutorial {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: auto;
  grid-gap: 1rem;
}

@media screen and (min-width: 647px) {
  .posts,
.tutorial {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  }
}
h2 {
  grid-column: 1/-1;
}

.tutorial > p,
.posts > p {
  grid-column: 1/-1;
}

@media screen and (min-width: 700px) {
  .tutorial h2,
.posts h2 {
    margin: calc(0.5 * var(--line-height));
    padding-left: 0;
  }
}
/* -------------------------------------------- */
/* 3.3 GRID LAYOUT CONSTRAINTS */
/* -------------------------------------------- */
main {
  max-width: 51.2em;
  margin: 0 auto;
}

/* -------------------------------------------- */