title: Two equal grids display different a cross browsers
body: <p>I have a weird problem on my wordpress site. I have two pages that are structurally equal, the first one is the posts page and the second is the tutorial page. </p>
  
  <p>But for some reason these two pages show different css grid result in some browsers on PC and MAC. For example in Firefox I see the correct result on both PC and MAC, but in Chrome on PC, only the posts page shows the correct result and the tutorial page is wrong where the cards are displaying beneath each other and not beside each other. But in Chrome on mac both pages shows the correct result. </p>
  
  <p>When I look in the developer tools in Chrome on PC I can see that <code>&lt;main&gt;</code> on the posts page is <code>1024px</code> wide, but on the tutorials page it is only <code>800px</code> wide. To better understand the problem, have a look at the two pages <a href="https://www.brovell.se/blogg/" rel="nofollow noreferrer">the posts page</a> and <a href="https://www.brovell.se/tutorials/" rel="nofollow noreferrer">the tutorial page</a></p>
  
  <p>I have tried clearing the cache on both browsers and wordpress itself, but nothing seems to help. And I can't figure out whats causing this issue.</p>
  
  <p>Posts page</p>
  
  <pre><code>&lt;?php get_header(); ?&gt;
  &lt;main class="posts"&gt;
  &lt;h2&gt;Blogg arkiv&lt;/h2&gt;
  &lt;p&gt;Kolla gärna igenom mitt arkiv&lt;/p&gt;
  &lt;?php while( have_posts() ) : the_post();
  ?&gt;
  
  &lt;div class="cards"&gt;
  &lt;?php echo '&lt;div class="post-excerpt-picture"&gt;' . get_the_post_thumbnail() . '&lt;/div&gt;'; ?&gt;
  &lt;p class="post-excerpt-date"&gt;Publiserad den &lt;?php the_date(); ?&gt;&lt;/p&gt;
  &lt;a href="&lt;?php the_permalink() ?&gt;"&gt;                                 
  &lt;h3&gt;&lt;?php the_title(); ?&gt;&lt;/h3&gt;&lt;/a&gt;
  &lt;?php the_excerpt(); ?&gt;
  &lt;button class="wp-block-button"&gt;&lt;a class="wp-block-button__link" href="&lt;?php the_permalink() ?&gt;"&gt;Läs mer&lt;/a&gt;&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;?php
  
  endwhile;
  wp_reset_postdata();
  
  ?&gt;
  &lt;/main&gt;
  &lt;div class="pageNumbers"&gt;&lt;?php echo paginate_links(); ?&gt;&lt;/div&gt;
  
  &lt;?php get_footer(); ?&gt;
  </code></pre>
  
  <p>Tutorial page</p>
  
  <pre><code>&lt;?php get_header(); ?&gt;
  &lt;main class="tutorial"&gt;
  &lt;h2&gt;Tutorial arkiv&lt;/h2&gt;
  &lt;p&gt;Kolla gärna igenom mitt arkiv med tips och trix inom fotografi och redigering&lt;/p&gt;
  &lt;?php while( have_posts() ) : the_post();
  ?&gt;
  
  &lt;div class="cards"&gt;
  &lt;?php echo '&lt;div class="post-excerpt-picture"&gt;' . get_the_post_thumbnail() . '&lt;/div&gt;'; ?&gt;
  &lt;p class="post-tutorial-date"&gt;Publiserad den &lt;?php the_date(); ?&gt;&lt;/p&gt;
  &lt;a href="&lt;?php the_permalink() ?&gt;"&gt;                                 
  &lt;h3&gt;&lt;?php the_title(); ?&gt;&lt;/h3&gt;&lt;/a&gt;
  &lt;?php the_excerpt(); ?&gt;
  &lt;button class="wp-block-button"&gt;&lt;a class="wp-block-button__link" href="&lt;?php the_permalink() ?&gt;"&gt;Läs mer&lt;/a&gt;&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;?php
  
  endwhile;
  wp_reset_postdata();
  
  ?&gt;
  &lt;/main&gt;
  &lt;div class="pageNumbers"&gt;&lt;?php echo paginate_links(); ?&gt;&lt;/div&gt;
  
  &lt;?php get_footer(); ?&gt;
  </code></pre>
  
  <p>The CSS</p>
  
  <pre><code>/* 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 &gt; p,
  .posts &gt; 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;
  }
  
  /* -------------------------------------------- */
  </code></pre>