Why won't my column-count work correctly in chrome vs. safari?

Question

I can't figure out why chrome is showing 3 columns instead of the 4. I've tried to change it to 5 or 6, and it still shows 3. Safari adjusts correctly per my code. What's going on? Do I need to set width properties?

I also noticed that if I change .placesarticle to display: block, the 4 columns show, but the thumbnail and title get split up.

HTML (& PHP)

<section class="placessection">

<?php
    $args = array(
            'post_type' => 'places',
            'post_status' => 'publish',
            'posts_per_page' => '100',
            'orderby' => 'title',
            'order' => 'ASC',
        );
    $arr_posts = new WP_Query( $args );
    
        if ( $arr_posts->have_posts() ) :
            while ( $arr_posts->have_posts() ) :
                $arr_posts->the_post();
?>

    <section class="placesarticle">
    <center>
        <div class="placescatthumbnail">
            <a href="<?php the_permalink();?>">
                <?php if (has_post_thumbnail()):?>
                    <img src="<?php the_post_thumbnail_url();?>" class="thumbnailinplaces">
                <?php endif;?>
            </a>
        </div>
    
        <div class="placescattitle">
            <a href="<?php the_permalink();?>"><?php the_title(); ?></a>
        </div>
    </center>
    </section>

</section>

CSS

/* category: places */
.placesarticle {
    background-color: #fff;
    display: inline-block;
}

.thumbnailinplaces {
    width: 100px;
}

@media (min-width: 1000px) {
    .placessection {
        column-count: 4;
        column-gap: 1em;
    }
    
    .placesarticle {
        margin: 1em;
        width: 20vw;
    }
}

Chrome view:

Safari view: