Добавление пробела между каждым столбцом bootstrap

Question

Я хотел бы добавить равное пространство между каждым столбцом bootstrap. Каждый столбец - это div

$('.hover').hover(function() {
  $(this).addClass('flip');
}, function() {
  $(this).removeClass('flip');
});
$('.click').toggle(function() {
  $(this).addClass('flipswing');
}, function() {
  $(this).removeClass('flipswing');
});

.panel {
  width: 100%;
  position: relative;
  height: 100%;
}

.panel .front {
  width: 200px;
  height: 200px;
  position: relative;
  top: 0px;
  left: 0px;
  border: 1px solid #ccc;
  text-align: center;
  -webkit-transform: rotateX(0) rotateY(0);
  transform: rotateX(0) rotateY(0);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
  margin-left: 20px;
}

.panel .back {
  width: 200px;
  height: 200px;
  position: relative;
  top: 0px;
  left: 0px;
  border: 1px solid #ccc;
  text-align: center;
  -webkit-transform: rotateY(-179deg);
  transform: rotateY(-179deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

.panel.flip .front {
  transform: rotateY(179deg)
}

.panel.flip .back {
  -webkit-transform: rotateX(0) rotateY(0);
}

.panel {
  -webkit-perspective: 800px;
  perspective: 800px;
}

.swing .front,
.swing .back {
  width: 140px;
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transform-origin: 170px 0;
  transform-origin: 170px 0;
}

.swing .front {
  -webkit-transform: rotateY(0);
  transform: rotateY(0);
}

.swing .back {
  -webkit-transform: rotateY(-180deg) translateX(198px) translateZ(2px);
  transform: rotateY(-180deg) translateX(198px) translateZ(2px);
}

.swing.flipswing .front {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.swing.flipswing .back {
  -webkit-transform: rotateY(0) translateX(198px) translateZ(2px);
  transform: rotateY(0) translateX(198px) translateZ(2px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row justify-content-center">
    <div class="col-lg-6">
      <div class="main_title">
        <p>Sample</p>
      </div>
    </div>
  </div>
  <div class="row" style="max-width:100%;left:0,top:0;margin:0;padding:0;">
    <!-- single-instructor -->
    <div class="col-lg-2">
      <div class="hover panel">
        <div class="front">
          <div class="single_instructor">
            <div class="author">
              <img src="{% static 'second/images/people/person2.jpg' %}" style="max-width:100%;max-height:100%;" alt="">
            </div>
            <div class="author_decs">
              <h4>Full Name</h4><br>
              <p class="profession">Job Title</p>
              <p>Country</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- single-instructor -->
    <div class="col-lg-2 col-lg-offset-6">
      <div class="hover panel">
        <div class="front">
          <div class="single_instructor">
            <div class="author">
              <img src="{% static 'second/images/people/newperson.jpg' %}" style="max-width:100%;max-height:100%;" alt="">
            </div>
            <div class="author_decs">
              <h4>FullName</h4><br>
              <p class="profession">Job</p>
              <p>Other Country</p>
              <p>Random Date</p>
            </div>
          </div>
        </div>
        <div class="back">
          <div class="single_instructor">
            <div class="author_decs">
              <p>More text goes here.</p>
              <p> Country</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- single-instructor -->
    <div class="col-lg-2 col-lg-offset-6">
      <div class="hover panel">
        <div class="front">
          <div class="single_instructor">
            <div class="author">
              <img src="{% static 'second/images/people/person1.jpg' %}" style="max-width:100%;max-height:100%;" alt="">
            </div>
            <div class="author_decs">
              <h4>Fullname</h4><br>
              <p>Some more text here</p>
            </div>
          </div>
        </div>
        <div class="back">
          <div class="single_instructor">
            <div class="author_decs">
              <p>More...</p>
              <p>Other person.</p>
              <p> Country</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-2 col-lg-offset-6">
      <div class="hover panel">
        <div class="front">
          <div class="single_instructor">
            <div class="author">
              <img src="{% static 'second/images/people/human.jpg' %}" style="max-width:100%;max-height:100%;" alt="">
            </div>
            <div class="author_decs">
              <h4>Full Name</h4><br>
              <p class="profession">Job Title</p>
              <p>Country</p>
              <p>More text</p>
            </div>
          </div>
        </div>
        <div class="back">
          <div class="single_instructor">
            <div class="author_decs">
              <p>More Text.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-2 col-lg-offset-6">
      <div class="hover panel">
        <div class="front">
          <div class="single_instructor">
            <div class="author">
              <img src="{% static 'second/images/people/person.jpg' %}" style="max-width:100%;max-height:100%;" alt="">
            </div>
            <div class="author_decs">
              <h4>Name Surnam</h4><br>
              <p class="profession">Job Title</p>
              <p>Country</p>
              <p>Test Text</p>
            </div>
          </div>
        </div>
        <div class="back">
          <div class="single_instructor">
            <div class="author_decs">
              <p>Some Text</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Я пробовал добавлять col-lg-offset-2 в каждый div после первого, но это не помогло