Как добавить поле между элементами в боковом контейнере, не нажимая на следующую строку

Question

У меня есть 3 предмета, которые завернуты в контейнер. Я добавил фоновый цвет и отступы к ним.

Теперь, когда я хочу добавить какое-то поле между ними, оно переходит к следующему ряду.

.div-category{
  background-color: #2274A5;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 50px;
  padding-bottom: 100px;
  border-radius: 3px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
  color: whitesmoke;
  //margin-right: 10px; Shifts line to next row.
}

JsFiddle

@import url('https://fonts.googleapis.com/css?family=Baloo+Bhaina');

/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-top: 3rem;
  padding-bottom: 3rem;
  color: #231123;
  background-color: #F4E04D;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}



.div-category{
  background-color: #2274A5;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 50px;
  padding-bottom: 100px;
  border-radius: 3px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
  color: whitesmoke;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
     <div class="container marketing">
<div class="row">
          <div class="col-lg-4 div-category">
            <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
            <h2>Text1</h2>
            <p>Paragraph1 </p>
            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
          </div><!-- /.col-lg-4 -->
          <div class="col-lg-4 div-category">
            <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
            <h2>Text2</h2>
            <p>Paragraph2.</p>
            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
          </div><!-- /.col-lg-4 -->
          <div class="col-lg-4 div-category">
            <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
            <h2>Text3</h2>
            <p>Paragraph3</p>
            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
          </div><!-- /.col-lg-4 -->
        </div><!-- /.row -->
        </div>

Answer 1

это потому, что вы использовали 12 столбцов сетки, а затем пытаетесь применить маржу, а поскольку все пространство экрана занято 12 столбцами, ему не хватает места и переносится на новую строку.

вы можете изменить col-lg-4 на col-lg-3 , а затем попытаться указать маржу.

Answer 2

Вам нужно немного изменить свою структуру, здесь обновляется скрипка

<div class="col-lg-4">
    <div class="div-category">
        ---
    </div>
</div>  
<div class="col-lg-4">
    <div class="div-category">
        ---
    </div>
</div>  
<div class="col-lg-4">
    <div class="div-category">
        ---
    </div>
</div>  

и небольшое поле, как

.col-lg-4 .div-category{
  margin: 0 20px;
}

должно работать

@import url('http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css');

/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-top: 3rem;
  padding-bottom: 3rem;
  color: #231123;
  background-color: #F4E04D;
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}



.div-category{
  background-color: #2274A5;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 50px;
  padding-bottom: 100px;
  border-radius: 3px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
  color: whitesmoke;
}
.col-lg-4 .div-category{
  margin: 0 20px;
}

     <div class="container marketing">
<div class="row">
          <div class="col-lg-4">
          <div class="div-category">
            <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
            <h2>Text1</h2>
            <p>Paragraph1 </p>
            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
            </div>
          </div><!-- /.col-lg-4 -->
          <div class="col-lg-4">
          <div class="div-category">
            <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
            <h2>Text2</h2>
            <p>Paragraph2.</p>
            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
          </div>
          </div><!-- /.col-lg-4 -->
          <div class="col-lg-4">
          <div class="div-category">
            <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
            <h2>Text3</h2>
            <p>Paragraph3</p>
            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
          </div>
          </div><!-- /.col-lg-4 -->
        </div><!-- /.row -->
        </div>

Answer 3

затем добавьте еще один div внутри и примените margin к этому классу .inside-margin

<div class="col-lg-4 col-md-4 col-sm-4 div-category">
<div class="inside-margin">

</div>
</div>

.inside-margin{ margin:0 5px; }