title: Bootstrap Columns not working when putting Margin
body: <p>I have two rows, each one of them divided into 2 columns with <code>col-sm-6</code>. As long as I keep the code as it is, the columns work, but the sections are all sticking together; so, when i try to give them some margin by setting</p>
  
  <p><code>.col-sm-6 {
  margin: 15px;
  }</code></p>
  
  <p>in the CSS, the columns break and get all divided vertically. No matter what kind of margin I put, it will always give me the same problem. I tried some other possible solutions beside this, but still, I can't solve it. What am i doing wrong?</p>
  
  <pre><code>&lt;div class="container"&gt;
  
  &lt;div class="row"&gt;
    &lt;div class="col-sm-6 categories" style="background-image: url(https://source.unsplash.com/category/nature/1600x900);"&gt;
     &lt;div class="opacity-overlay"&gt;
       &lt;h2&gt;Section 1&lt;/h2&gt;
       &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  
   &lt;div class="col-sm-6 categories" style="background-image: url(https://source.unsplash.com/category/food/1600x900);"&gt;
     &lt;div class="opacity-overlay"&gt;
       &lt;h2&gt;Section 2&lt;/h2&gt;
       &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
     &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div class="row"&gt;
    &lt;div class="col-sm-6 categories" style="background-image: url(https://source.unsplash.com/category/people/1600x900);"&gt;
     &lt;div class="opacity-overlay"&gt;
       &lt;h2&gt;Section 3&lt;/h2&gt;
       &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  
   &lt;div class="col-sm-6 categories" style="background-image: url(https://source.unsplash.com/category/Objects/1600x900);"&gt;
     &lt;div class="opacity-overlay"&gt;
       &lt;h2&gt;Section 4&lt;/h2&gt;
       &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
     &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the CSS:</p>
  
  <pre><code>.categories {
    text-align: center;
    background-position: center center;
    background-size: cover;
    color: black;
    padding: 50px;
  }
  
  .opacity-overlay {
    background: rgba(255, 255, 255, 0.85);
    padding: 1px 20px 10px 20px;
  }
  </code></pre>