How to create a horizontal margin between divs with Bootstrap 4 scss

Question

I'm trying to learn to use Bootstrap and Sass. I'm stuck at something seemingly simple, but I just can't get it to work. How to create a margin between the divs below?

I tried to insert margin-top or margin-bottom at every div but I can't get the result I'm looking for. I tried to wrap the divs in containers and inserted rows in different ways, but after all this time I don't know what to look for anymore. Every time a div just becomes longer or shorter after adding a margin. The divs keep sticking to each other because of their background colors. I would like to have white space in between of them.

How to adjust the scss to get this done?

html

<div class="container">
    <div class="main_body"><div class="sidebar"></div>
        <div class="main_content">
            <div class="main_items">
                <div class="profileTabs"></div>
                <div class="profileHead"></div>
                <div class="interests"></div>
                <div class="profileLabels"></div>
            </div>
----------------------------------margin-------------------------------
            <div class="item">
                <div class="avatars"></div>
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="avatars"></div>
                <div class="content"></div>
            </div>
        </div>
    </div>
</div>

scss

.container {
  @include make-container();
  .main_body {
    @include make-row();
    .sidebar {
      @include make-col-ready();
      @include make-col(1.8, 12);
      margin-right: 15px;
    }
    .profileTabs {
      @include make-col-ready();
      @include make-col(10, 10);
    }
    .main_content {
      @include make-col-ready();
      @include make-col(10, 12);
      .main_items {
        @include make-row();
        .profileHead {
          @include make-col-ready();
          @include make-col(2, 10);
        }
        .interests {
          @include make-col-ready();
          @include make-col(2, 10);
        }
        .profileLabels {
          @include make-col-ready();
          @include make-col(2, 10);
        }
      }
      .item {
        @include make-row();
        .avatars {
          @include make-col-ready();
          @include make-col(2.2, 10);
        }
        .content {
          @include make-col-ready();
          @include make-col(7.8, 10);
        }
      }
    }
  }
}

Answer 1

You could use <hr>.

This may be what you're looking for.

Here's an example: jsfiddle