How to make three SMT area in a row

We can create three SMT area parallelly in a row.

<div class="container">
          <div class="home-banner-main">
            {{#each MiddleBannerImages}}
                <div class="home-banner-main-cell-nth{{@index}}">
                    <div class="home-banner-main-cell-bg">
                        {{#if link}}
                        <a href="{{link}}">{{/if}}
                        <div data-id="home-page-zone"
                             data-type="image"
                             data-cms-area="home-banner-middle-image-nth{{@index}}"
                             data-cms-area-filters="path"></div>
                        {{#if link}} </a>{{/if}}
                    </div>
                </div>
            {{/each}}
        </div>
    </div>

.home-banner-main,
{
  margin-bottom: $sc-base-margin * 4;
  @extend .row;
  margin-left: 0;
  margin-right: 0
}


.home-banner-main-cell-nth0{
  @extend .col-xs-12;
  @extend .col-sm-4;
  text-align: center;
  margin-bottom: $sc-medium-margin;
  margin-left: $sc-medium-margin 3;
  border: 1px solid $sc-color-theme-border;
  padding: 0;
  padding-top: $sc-base-padding*2;
  width: 100%;

  @media (min-width: $screen-md-min) {
    width: 30%;
  }
  img {
    width: 100%;
  }
}
.home-banner-main-cell-bg {
  background: $sc-color-slide-background;
  width: 100%;
  overflow: hidden;
}