title: Adding a gap between two column divs with the same class side-by-side
body: <p>I know this was asked many times in SO but I can't find the answer for my question. I used bootstrap with this one and tried to have a two six columns in a row. It works as expected but what I want to achieve is that I wanted to out a gap between them. To see what I mean you can check it <a href="https://jsfiddle.net/swwcxuo3/" rel="nofollow">here</a>.
  I don't want to override the bootstrap cols here. I wanted to use only the added class which is <code>survey-extra</code>.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
   &lt;div class="row visit-redeem text-center"&gt;
     &lt;h5&gt;Visit Site To Redeem&lt;/h5&gt;
   &lt;/div&gt;
    &lt;div class="row"&gt;
    &lt;div class="col-xs-6 survey-extra"&gt;
      &lt;h5&gt;FROM OUR SPONSORS&lt;/h5&gt;
      &lt;span class="money-extra"&gt;$0.00&lt;/span&gt;
    &lt;/div&gt;
  
    &lt;div class="col-xs-6 survey-extra"&gt;
      &lt;h5&gt;FREEBIES&lt;/h5&gt;
      &lt;span class="money-extra"&gt;$0.00&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code> .survey-extra {
          background: #1e90ff;
          color: #fff;
          padding: 5px;
          border-radius: 10px;
          text-transform: uppercase;
      }
  .visit-redeem {
    background: #56a4da;
    margin-top: 5px;
    margin-bottom: 6px;
    color: #fff;
    padding: 5px;
    border-radius: 20px 20px 0 0;
    text-transform: uppercase;
  }
  </code></pre>
  
  <p>I also tried the <code>CSS3 :nth-of-type() Selector</code> but no luck!</p>
  
  <blockquote>
    <p>I wanted to do this using css only.</p>
  </blockquote>