CSS Grid & Blog Listing Page (home.php) Troubles

Hi everyone!

I’m building out a theme for a beauty salon, everything was coming along nicely, until it came time to build out the blog listing page (home.php) when everything came crashing down.

I have built myself a CSS grid system that works perfectly, and have never had any problems with before. This is where I feel WordPress may have a problem somewhere, or more than likely I have missed something and just need some extra eyes to have a look at my code.

Basically what’s happening is, as you would expect each blog post listing is displayed over 3 grid columns, but for some reason these styles are being ignored and everything is displaying on top of each other. I’ll include the code that I’m using for home.php

<?php get_header(); ?>

<section class="banner-default">
	<h1 class="headline"><?php the_title(); ?></h1>
</section><!-- /.banner -->

<section class="container clearfix">

	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

		<div class="row">

			<div class="col-4">
				<article class="blog-post-listing">

					<?php if( the_post_thumbnail() ) : ?>
						<?php
							// Check to see if there is a featured image, if so display it
							the_post_thumbnail( 'large' );
						?>
					<?php endif; ?>

					<h4><small><?php the_category(); ?></small></h4>
					<p><small><?php the_date(); ?> By <?php the_author_posts_link(); ?></small></p>
					<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
					<p><?php the_excerpt(); ?></p>
				</article>
			</div><!-- /.col-4 -->

		</div><!-- /.row -->

	<?php endwhile; else : ?>

		<h3 class="text-center"><?php _e( 'Sorry, no pages found, please try again.' ) ?></h3>

	<?php endif; ?>

</section><!-- /.container -->

<?php get_footer(); ?>

I would really appreciate any help with this as it’s a rather irritating bug that I just can’t seem to fix.

Thanking you all in advance

Stu ??