使用Bulma框架的自定义WordPress主题，博客卡片不能正确对齐

<!-- 在WordPress主题的header.php中引入Bulma CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">

<div class="columns is-multiline">
  <?php foreach ($posts as $post) : ?>
    <div class="column is-one-quarter-desktop is-half-tablet">
      <!-- 博客卡片内容 -->
      <div class="card">
        <div class="card-image">
          <img src="<?php echo get_the_post_thumbnail_url($post->ID); ?>" alt="<?php the_title(); ?>">
        </div>
        <div class="card-content">
          <div class="media">
            <div class="media-left">
              <figure class="image is-48x48">
                <img src="<?php echo get_avatar_url($post->author_id); ?>" alt="<?php echo get_the_author_meta('display_name', $post->author_id); ?>">
              </figure>
            </div>
            <div class="media-content">
              <p class="title is-6"><?php the_title(); ?></p>
              <p class="subtitle is-7"><?php echo get_the_date('F j, Y', $post->ID); ?></p>
            </div>
          </div>
          <div class="content">
            <?php the_excerpt(); ?>
          </div>
        </div>
      </div>
    </div>
  <?php endforeach; ?>
</div>

/* 在主题的style.css中添加自定义样式 */
.card {
  margin: 1rem;
}

@media screen and (max-width: 768px) {
  .column.is-half-tablet {
    flex: none;
    width: 100%;
  }
}