Laravel loop damaged design - laravel

Question

I have default template which is looks like this
when i add my loop it becomes like this
Issue
As you see in second image padding and margins are not as same as default one but html output looks fine
here is the code
<div class="col-md-5 col-xs-12 pad-l">
<div class="row">
#foreach($featuresTwo as $featuret)
#if($loop->first)
<div class="col-sm-12">
<div class="post-overaly-style hot-post-top clearfix">
<div class="post-thumb">
<a href="#">
<img class="img-fluid" src="theme/images/news/tech/gadget2.jpg" alt="" />
</a>
</div>
<div class="post-content">
<a class="post-cat" href="#">
#foreach($featuret->categories as $categoryt)
{{ $loop->first ? ' ' : ', ' }}
{{$categoryt->title}}
#endforeach
</a>
<h2 class="post-title title-large">
{{$featuret->title}}
</h2>
</div><!-- Post content end -->
</div><!-- Post Overaly end -->
</div><!-- Col end -->
#else
<div class="col-sm-6 pad-r-small">
<div class="post-overaly-style hot-post-bottom clearfix">
<div class="post-thumb">
<img class="img-fluid" src="theme/images/news/lifestyle/travel2.jpg" alt="" />
</div>
<div class="post-content">
<a class="post-cat" href="#">
#foreach($featuret->categories as $categoryt)
{{ $loop->first ? ' ' : ', ' }}
{{$categoryt->title}}
#endforeach
</a>
<h2 class="post-title title-medium">
{{$featuret->title}}
</h2>
</div><!-- Post content end -->
</div><!-- Post Overaly end -->
</div><!-- Col end -->
#endif
#endforeach
</div>
</div><!-- Col 5 end -->
Question
Where did I make mistake? How to fix it?
Thanks.
UPDATE
original html without loop
<div class="col-md-5 col-xs-12 pad-l">
<div class="row">
<div class="col-sm-12">
<div class="post-overaly-style hot-post-top clearfix">
<div class="post-thumb">
<a href="#">
<img class="img-fluid" src="images/news/tech/gadget2.jpg" alt="" />
</a>
</div>
<div class="post-content">
<a class="post-cat" href="#">Gadget</a>
<h2 class="post-title title-large">
Samsung Gear S3 review: A whimper, when smartwatches need a bang
</h2>
</div><!-- Post content end -->
</div><!-- Post Overaly end -->
</div><!-- Col end -->
<div class="col-sm-6 pad-r-small">
<div class="post-overaly-style hot-post-bottom clearfix">
<div class="post-thumb">
<img class="img-fluid" src="images/news/lifestyle/travel2.jpg" alt="" />
</div>
<div class="post-content">
<a class="post-cat" href="#">Travel</a>
<h2 class="post-title title-medium">
Early tourists choices to the sea of Maldiv…
</h2>
</div><!-- Post content end -->
</div><!-- Post Overaly end -->
</div><!-- Col end -->
<div class="col-sm-6 pad-l-small">
<div class="post-overaly-style hot-post-bottom clearfix">
<div class="post-thumb">
<img class="img-fluid" src="images/news/lifestyle/health1.jpg" alt="" />
</div>
<div class="post-content">
<a class="post-cat" href="#">Health</a>
<h2 class="post-title title-medium">
That wearable on your wrist could soon...
</h2>
</div><!-- Post content end -->
</div><!-- Post Overaly end -->
</div><!-- Col end -->
</div>
</div><!-- Col 5 end -->
........................................................................................................................

Answer 1

The original code for the two half width columns has one like this:
<div class="col-sm-6 pad-r-small">
And one like this:
<div class="col-sm-6 pad-l-small">
But you've used a loop to create two of the same like this:
<div class="col-sm-6 pad-r-small">
You should probably just key the features in the $featuresTwo array and drop the loops so you can replicate the code accurately.

Answer 2

Solved
Based on wheelmaker answer i got the idea and changed my div after #else to be like
#if($loop->last)
<div class="col-sm-6 pad-l-small">
#else
<div class="col-sm-6 pad-r-small">
#endif
and that solved the style issue.
PS: I'm accepting wheelmaker answer because he made me realized the
issue.