Custom Post Type Query

Hello I am having an issue with my custom post type query. I am displaying projects with Bootstrap as a framework and the query displays all my test project post type info but the columns are stacking instead of displaying 3 in a row (since I am using col-md-4 in the div. These were displaying normal in the html static template and I have tried playing around with the loop with no change in the way it displays. Here is the code for the entire page some of the content is still static:

<?php 
/**
* Template Name: Portfolio Page
*
* 
*/
?>

<?php get_header(); ?>

  <div class="portfolio-heading">
    <h1 class="about-me text-center animated flash"><?php the_title(); ?></h1>
      <div class="row justify-content-center">
        <div class="col-md-6">
          <p class="lead portfolio-intro animated fadeIn"><?php the_field('intro_text'); ?></p>  
        </div>
      </div>
  </div>      

  <div class="album">        

      <div class="container portfolio">  
        <?php  
        $args = array( 'post_type' => 'projects' );
          $the_query = new WP_Query( $args );
        ?>
        <?php if ( $the_query->have_posts() ) : ?>
        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>          
          <div class="row js--wp-4"> 
            <div class="col-md-4">                            
                <div class="card">          
                  <img src="<?php the_field('background_img_small'); ?>" alt="" class="site-image">
                  <div class="overlay text-center">
                    <h2 class="card-title"><?php the_title(); ?></h2>
                    <p class="card-info"><?php the_field('short_desc'); ?></p>
                    <div class="d-flex justify-content-center align-items-center">
                        <a href="portfolio-single.html"><button type="button" class="btn btn-md btn-outline-secondary">View Project</button></a>
                    </div>
                  </div>
                </div>                  
            </div> 
          </div>
           <?php endwhile;
            wp_reset_postdata(); ?>
            <?php else: ?>
            <p><?php _e( 'Sorry there are no posts' ); ?></p>
            <?php endif; ?>            
          </div> 
       </div>
     </div>

    <div class="free-themes">
      <h2 class="text-center my-themes">My Themes</h2>
      <p class="lead text-center themes-text">This is my free themes section where you can find my WordPress projects. Free to download on Github.</p>
      <div class="row d-flex justify-content-center">
        <img src="img/lapizzaria.png" alt="LaPizzaria Homepage" class="free-single-img">
        <div class="col-md-6 free-details">
          <h3 class="text-center theme-title">Business Theme</h3>
          <p class="">This is a WordPress business theme. It is perfect for showcasing your business. Multiple page templates let you choose which design is best for you.</p>
          <div class="text-center">
            <a href="#"><button class="btn btn-primary btn-lg btn-free">View Demo</button></a>
            <a href="#"><button class="btn btn-primary btn-lg btn-free">Download</button></a>
          </div>
        </div>
      </div>
    </div>

<?php get_footer(); ?>

Here is the code for the projects loop:

<div class="container portfolio">  
        <?php  
        $args = array( 'post_type' => 'projects' );
          $the_query = new WP_Query( $args );
        ?>
        <?php if ( $the_query->have_posts() ) : ?>
        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>          
          <div class="row js--wp-4"> 
            <div class="col-md-4">                            
                <div class="card">          
                  <img src="<?php the_field('background_img_small'); ?>" alt="" class="site-image">
                  <div class="overlay text-center">
                    <h2 class="card-title"><?php the_title(); ?></h2>
                    <p class="card-info"><?php the_field('short_desc'); ?></p>
                    <div class="d-flex justify-content-center align-items-center">
                        <a href="portfolio-single.html"><button type="button" class="btn btn-md btn-outline-secondary">View Project</button></a>
                    </div>
                  </div>
                </div>                  
            </div> 
          </div>
           <?php endwhile;
            wp_reset_postdata(); ?>
            <?php else: ?>
            <p><?php _e( 'Sorry there are no posts' ); ?></p>
            <?php endif; ?>            
          </div> 
       </div>
     </div>