Two View Blocks don't line up in the same section – – Bootstrap 3 SASS Theme

I am new to CSS and Bootstrap, Kindly bear with me

I have two View Blocks using the display suite view mode of a content type to display as blocks. In Bootstrap Highlight SECTION.

I placed them one after another,  I assumed they will automatically line up in one horizontal row. As the width of First Row is col-sm-6

The next block’s width is col-sm-3

but they don’t get placed in same horizontal row.

It appears like this the first view block takes the entire horizontal row. Then in the next row the next view block begins. Although the first View Block should only take col-sm-3 plus col-sm-3 = col-sm-6

I tried to add a custom col-sm-8 column to the Edit View, however it did not work.

It does not have any Margin , or anything

Somebody help me how to do it

Thanks in Advance

HERE is the HTML 

<section class=”col-sm-12″>

 <div class=”highlighted”>

  <div class=”region region-highlighted”>
    

                    <section class=”views-element-container contextual-region block block-views block-views-blockfrontpage-event-view–block-1 clearfix” id=”block-views-block-frontpage-event-view-block-1″>
      
                     <h2 class=”block-title”>Our Upcoming Events</h2>
                    

          

                            <div class=”form-group”>

                                
                                         <div class=”view-content”>
          
                                            <div class=”views-row”>

                                                <!– BEGIN OUTPUT from ‘modules/contrib/ds/templates/ds-2col.html.twig’ –>
                                                    <div data-history-node-id=”11″ data-quickedit-entity-id=”node/11″ class=”contextual-region node node–type-events node–view-mode-teaser ds-2col clearfix”>

                                                        

                                                            <div class=”col-sm-3 group-left”>
                                                                   <div class=”field–label”>Event Poster</div>
                                                                            <div class=”field–item”>
                                                                                    <img src=”/ausgfim/sites/default/files/styles/event_thumb_image_style/public/2019-03/Chennai%20Meeting.jpg?itok=1heFD4qx” width=”350″ height=”450″ alt=”Supernatural Encounter Chennai” typeof=”foaf:Image” class=”img-responsive” />

                                                                                </div>
                                                                      </div>

                                                             </div>
                                                     <div class=”col-sm-3 group-right”>
                                                               <div class=”field field–name-node-title field–type-ds field–label-hidden field–item”><h2>
                                                                                      EVENT TITLE
                                                                                 </h2>
                                                                                  </div>
                                                               <div data-quickedit-field-id=”node/11/body/en/teaser” class=”field field–name-body field–type-text-with-summary field–label-hidden field–item”><p>EVNT DESCRIPTION  too… Wow please come and I am sure you will be blessed.</p></div>
                                                                  <div data-quickedit-field-id=”node/11/field_event_date/en/teaser” class=”field field–name-field-event-date field–type-datetime field–label-above”>
                                                                 <div class=”field–label”>Event Date</div>
                                                          <div class=”field–item”>01-03-2019</div>
                                                            </div>

                                                      <div data-quickedit-field-id=”node/11/field_event_venue/en/teaser” class=”field field–name-field-event-venue                                                             field–type-string field–label-above”>
                                                     <div class=”field–label”>Event Venue</div>
                                                   <div class=”field–item”>Ambattur, Chennai</div>
                                            </div> /
                <div class=”field field–name-node-link field–type-ds field–label-hidden field–item”>  <a href=”/ausgfim/node/11″ hreflang=”en”>Read more</a>
    </div>
          
      </div>

    </div>

    </div>

        </div>
              </div>
          
      
    </div>

 </section>

            <section class=”views-element-container contextual-region block block-views block-views-blockfrontpage-our-services-view-block-1 clearfix” id=”block-views-block-frontpage-our-services-view-block-1″>
              
                  <h2 class=”block-title”>Weekly Services</h2>
                <div data-contextual-id=”block:block=views_block__frontpage_our_services_view_block_1:langcode=en|entity.view.edit_form:view=frontpage_our_services_view:location=block&amp;name=frontpage_our_services_view&amp;display_id=block_1&amp;langcode=en” data-contextual-token=”ev3RXYGPyFk7-JgrRohZt31oC6nJMX2bvOUjS7H7O-I”></div>

            <div class=”form-group”>

            <div class=”contextual-region view view-frontpage-our-services-view view-id-frontpage_our_services_view view-display-id-block_1 js-view-dom-id-977ff75de9194fdc585d53f5b80a518629d19b2188f72c90c923e03e51f1a699″>
              
                <div data-contextual-id=”entity.view.edit_form:view=frontpage_our_services_view:location=block&amp;name=frontpage_our_services_view&amp;display_id=block_1&amp;langcode=en” data-contextual-token=”o-9AtWT-6dGnT9rLSbF6RsfwC2CaNjYvxuZRyt08cbI”></div>
                  
                  <div class=”view-content”>
                  

                <div class=”views-row”>

            <div data-history-node-id=”14″ data-quickedit-entity-id=”node/14″ class=”contextual-region node node–type-our-services node–view-mode-teaser ds-1col clearfix”>

              <div data-contextual-id=”node:node=14:changed=1551428246&amp;ds_bundle=our_services&amp;ds_view_mode=teaser&amp;langcode=en” data-contextual-token=”HpLb5PVay3Yp01bQLHv6TkyyoMsxe8fNtIb-E2Ugmig”></div>

              

                        <div data-quickedit-field-id=”node/14/field_s/en/teaser” class=”field field–name-field-s field–type-image field–label-hidden field–item”>

            <img src=”/ausgfim/sites/default/files/styles/medium/public/2019-03/worship2.jpg?itok=2dHh36FJ” width=”220″ height=”124″ alt=”Sunday Worship” typeof=”foaf:Image” class=”img-responsive” />

            </div>

                        <div class=”field field–name-node-title field–type-ds field–label-hidden field–item”><h2>
              Sunday Service Program
            </h2>
            </div>
                  

              <div data-quickedit-field-id=”node/14/field_time/en/teaser” class=”field field–name-field-time field–type-date-recur field–label-above”>
                <div class=”field–label”>Time</div>
                          <div class=”field–item”>

              <div class=”date-recur-date”>

            <time datetime=”2019-03-03T08:00:00Z”>Sun, 03/03/2019 – 08:00</time>

            </div>

            </div>
                      </div>

              <div data-quickedit-field-id=”node/14/field_location/en/teaser” class=”field field–name-field-location field–type-string field–label-above”>
                <div class=”field–label”>Location</div>
                          <div class=”field–item”> Australia</div>
                      </div>

            </div>
             ‘modules/contrib/ds/templates/ds-entity-view.html.twig’ –>

            </div>
                <div class=”views-row”>

            <div data-history-node-id=”15″ data-quickedit-entity-id=”node/15″ class=”contextual-region node node–type-our-services node–view-mode-teaser ds-1col clearfix”>

              <div data-contextual-id=”node:node=15:changed=1551428147&amp;ds_bundle=our_services&amp;ds_view_mode=teaser&amp;langcode=en” data-contextual-token=”Zhi_FUMjFaniD4ehJGeRuLtMUjn0xRa-uVbeIOZpvkM”></div>

                        <div data-quickedit-field-id=”node/15/field_s/en/teaser” class=”field field–name-field-s field–type-image field–label-hidden field–item”>

            <img src=”/ausgfim/sites/default/files/styles/medium/public/2019-03/worship3.jpg?itok=ezdoI3ot” width=”220″ height=”146″ alt=”Sunday School” typeof=”foaf:Image” class=”img-responsive” />

            </div> <div class=”field field–name-node-title field–type-ds field–label-hidden field–item”><h2>
              Regular program 2
            </h2>
            </div>
              <div data-quickedit-field-id=”node/15/field_time/en/teaser” class=”field field–name-field-time field–type-date-recur field–label-above”>
                <div class=”field–label”>Time</div>
                          <div class=”field–item”>

              <div class=”date-recur-date”>

           
            <time datetime=”2019-03-03T07:00:00Z”>Sun, 03/03/2019 – 07:00</time>

            </div></div></div>

              <div data-quickedit-field-id=”node/15/field_location/en/teaser” class=”field field–name-field-location field–type-string field–label-above”>
                <div class=”field–label”>Location</div>
                          <div class=”field–item”>Australia</div>
                      </div>

            </div></div></div> </div></div>  </section>
 

Drupal version: 


Source: https://www.drupal.org/taxonomy/term/3/feed