Flexbox displaying as column, not row

I am creating a "Recent Posts" section for a blog. I want to display three cards that flex in a row. Currently, they are displaying perfectly -- but in a column. I've tried flex-direction on the .blog-related-posts container class, with no luck.

The site is on Hubspot CMS.

Here's the code:

        <hr>
                  <div>

            <h2 class="blog-related-posts__title">
                Related Posts
            </h2>
              </div>
             <!-- related blog posts section starts here -->
            
  {% macro blog_post_formatter(post) %}

      <div class="blog-related-posts__post">
        
        {% if post.featured_image %}
        <a href="{{ post.absolute_url }}"><img class="related-img" loading="lazy" alt="{{ post.featured_image_alt_text }}" src="{{ resize_image_url(post.featured_image,0,0,300) }}"></a>
{% endif %}
        
        <div class="blog-related-posts__post-content">
          <div>
            <h3><a href="{{ post.absolute_url }}">{{ post.name }}</a></h3>
         

              <div class="kl-slider-testimonial__button-sm">
                {# {{ render_button(item.primary_cta) }} #}
                <a class='button buttonwhite--arrow' href='{{ post.absolute_url }}'> Read More </a>
            
              </div>
            </div>
            
             
       
        </div>
      </div>
  
    

  {% endmacro %}

                
  <div class="blog-related-posts">  
    <div class="blog-related-posts__post-wrapper">

  {% related_blog_posts limit=3, post_formatter="blog_post_formatter" %}
  
</div>
 

</div>

  <!-- end of blog related section --> 

          
  

And the related CSS:

 hr {
  margin: 60px 0 60px 0;
}

.blog-related-posts {
  display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

.blog-related-posts__post-wrapper {
    flex-basis: 30%;
    padding: 15px;
    box-sizing: border-box;
    }

.blog-related-posts__post {
  margin: 0;
    padding: 20px 20px;
  border: 0.5px solid rgba({{theme.cards.border_color.color|convert_rgb}}, {{theme.cards.border_color.opacity != null ? theme.cards.border_color.opacity / 100 : 1}});
  box-shadow: 0px 11px 30px rgba({{theme.cards.box_shadow.color|convert_rgb}}, {{theme.cards.box_shadow.opacity != null ? theme.cards.box_shadow.opacity / 100 : 1}});
  border-radius: {{theme.cards.border_radius}}px;
}



@media screen and (max-width:991px){
.blog-related-posts__post-wrapper {
width: 50%;
}
}



.blog-related-posts__title {
  color: {{theme.global_colors.primary_color.color}};
  font-size: 24px;
  font-weight: 800;
  text-align: center;
  line-height: 23px;
  margin: 40px auto;
}


.blog-related-posts__post-content h2 {
  color: {{theme.global_colors.primary_color.color}};
  font-size: 23px;
  font-weight: 800;
  text-align: center;
  margin: 10px;
}

.blog-related-posts__post-content h3 {
  color: {{theme.global_colors.primary_color.color}};
  font-size: 17px;
  font-weight: 800;
  text-align: center;
  line-height: 23px;
  margin: 10px;
}

.blog-related-posts__post-content h3 a {
  color: {{theme.global_colors.primary_color.color}};  
  font-size: 17px;
  font-weight: 800;
  text-align: center;
  line-height: 23px;
}

.blog-related-posts__post-content h3 a:hover {
  color: #2da6dd;
  text-decoration: none;
}

.blog-related-posts__post-content a {
  margin: 0 auto;
}

#blog-related-posts__post-image.lazy {
  background-image: none;
  background-color: #F1F1FA;
}

#bg-image {
  background-image: url( {{post.featured_image }});
  height: 170px;
  background-size: contain;
  margin-left: auto;
  margin-bottom: 20px;
  margin-right: auto;
  flex-shrink: 0;
}

#blog-related-posts__post-image {
  display: block;
  width: 100%;
  height: 170px;
  background-size: contain;
  margin-left: auto;
  margin-bottom: 20px;
  margin-right: auto;
  flex-shrink: 0;
}

#blog-related-posts__post-image > background {
  object-fit: contain;
  display: block;
}

display: flex works on direct children of element you apply it for. I think you should either apply display: flex to blog-related-posts__post-wrapper, or remove div with class blog-related-posts__post-wrapper.

Also, you don't need to specify flex-direction: row as it is row by default.