У меня есть шаблон по умолчанию, который выглядит так

когда я добавляю свой цикл, он становится таким

Проблема

Как вы видите, на втором изображении заполнение и поля не такие же, как по умолчанию, но вывод html выглядит нормально

вот код

<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">
                                <a href = "#">{{$featuret->title}}</a>
                            </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">
                            <a href = "#"><img class = "img-fluid" src = "theme/images/news/lifestyle/travel2.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-medium">
                                <a href = "#">{{$featuret->title}}</a>
                            </h2>
                        </div><!-- Post content end -->
                    </div><!-- Post Overaly end -->
                </div><!-- Col end -->
            @endif
        @endforeach
    </div>
</div><!-- Col 5 end -->

Вопрос

Где я ошибся? Как это исправить?

Спасибо.

ОБНОВИТЬ

исходный HTML без цикла

<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">
                    <a href = "#">Samsung Gear S3 review: A whimper, when smartwatches need a bang</a>
                </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">
                <a href = "#"><img class = "img-fluid" src = "images/news/lifestyle/travel2.jpg" alt = "" /></a>
            </div>
            <div class = "post-content">
                <a class = "post-cat" href = "#">Travel</a>
                <h2 class = "post-title title-medium">
                    <a href = "#">Early tourists choices to the sea of Maldiv…</a>
                </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">
                <a href = "#"><img class = "img-fluid" src = "images/news/lifestyle/health1.jpg" alt = "" /></a>
            </div>
            <div class = "post-content">
                <a class = "post-cat" href = "#">Health</a>
                <h2 class = "post-title title-medium">
                    <a href = "#">That wearable on your wrist could soon...</a>
                </h2>
            </div><!-- Post content end -->
        </div><!-- Post Overaly end -->
        </div><!-- Col end -->
    </div>
</div><!-- Col 5 end -->

.................................................. .................................................. ....................