Wordpress - template part break wordpress columns layout - php

Question

I think that some help will be appreciated. I have this code that will load two template part for a wordpres custom theme:
<div class="row m-0">
<?php get_template_part('assets/main', 'news'); ?>
<?php get_template_part('assets/side', 'news'); ?>
</div>
As you can see under the hood I'm using bootstrap 4 so it's supposed that the content will align itself inside the same row.
I have a col-8 inside the main-news.php and a col-4 inside the side-news.php so I supposed that I will have the contents aligned, but this will not happen and my layout will break.
this is the code inside the main.news.php teplate part:
<?php $main_news = new WP_Query( array( 'post_type' => 'post', 'category_name' => 'main-news', 'posts_per_page' => 4) ); ?>
<!-- main -->
<div class="col-sm-12 col-md-8 col-lg-8 mt-2">
<p class="text-uppercase font-weight-bold mb-0 section-title"><?php _e('Last news') ?></p>
</div>
<?php if( $main_news->have_posts() ): while( $main_news->have_posts() ): $main_news->the_post(); ?>
<div class="col-sm-12 col-md-8 col-lg-8 mt-2 mb-2">
<div class="card rounded-0 p-0">
<img class="card-img-top w-100 h-100 rounded-0" src="<?php echo the_post_thumbnail_url(); ?>" />
<div class="card-img-overlay news-overlay">
<a class="h4 stretched-link" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</div>
</div>
</div>
<?php endwhile; endif; wp_reset_postdata() ?>
this is the content of side-news.php
<?php $middle_news = new WP_Query( array( 'post_type' => 'post', 'category_name' => 'market-news', 'posts_per_page' => 4 ) ); ?>
<div class="col-sm-12 col-md-4 col-lg-4">
<p class="text-uppercase font-weight-bold mb-0 section-title"><?php _e('Side news') ?></p>
</div>
<?php if( $middle_news->have_posts() ): while( $middle_news->have_posts() ): $middle_news->the_post(); ?>
<div class="col-sm-12 col-md-4 col-lg-4 mt-2 mb-2">
<img class="img-fluid w-100" src="<?php echo the_post_thumbnail_url(); ?>" />
<a class="h4 stretched-link" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</div>
<?php endwhile; endif; wp_reset_postdata(); ?>
How I can fix the layout to have the col-8 and the col-4 on the same row line?Maybe I need to nest the loops or what?
See the scree to understand what's happening now

Answer 1

your mistake is inside the main-news.php file.
look, you defined these (col-sm-12 col-md-8 col-lg-8 ) for your first div tag in the main-news.php file so your div takes those columns and then you defined these (col-sm-12 col-md-8 col-lg-8 ) columns for the div tag inside of the loop at the same file so both divs take more than 12 columns just inside the main-news.php file whereas you defined (col-sm-12 col-md-4 col-lg-4) for the div inside of the side-news.php file again so these definitions break your code.
Solution: You should delete the columns definition from one of the divs inside the main-news.php file.
GOOD LUCK!!!