I am soo lost, my brain has died.

I am trying to create a loop where it loops through the code and displays 3 column in a row.. i’ve done this a hundred times but cant think today.

can some one see why my divs are stacking and not next to eachover please.

   <section <?php theme_section_attr_id() ?> <?php theme_section_attr_class( 'bg-teal-dark text-white' ) ?>>
    <div class="container justify-content-cente ">
    
    <div class="row p-5">
        <div class="text-center">
             <h2 class="text-white pb-3"><?php echo esc_html( get_sub_field( 'three_section_title' ))?></h2>
        </div>
      </div>
      </div>
        
<?php
if( have_rows('three_section_area') ):
?>
   <div class="container">
        <div class="row">
<?php
    while( have_rows('three_section_area') ) : the_row();?>
    <div class="col-4">
    <h6 class="text-white fw-bold"><?php echo esc_html( get_sub_field( 'title' ))?></h6>
        <p><?php echo esc_html( get_sub_field( 'description' ))?></p>
        </div>
        <?php
        // nested loop
if( have_rows('list_group') ):
    while( have_rows('list_group') ) : the_row();?>
    <ul class="check-list">
        <li></li><?php echo esc_html( get_sub_field( 'list_item' ))?></li>
        </ul>
        <?php
    // End loop.
    endwhile;
else :
endif;
    // End loop.
    endwhile;
else : ?>
          </div>
    </div>
<?php endif; ?>
    
  
</section>