title: Bootstrap 4 change spacing between columns wraps underneath instead of side to side
body: <p>What I try to achieve is to have a 2 divs that take over 6 columns bith with some space between them of 1px.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"&gt;
  
  &lt;div class="container-fluid"&gt;
  &lt;div class="row"&gt;
  &lt;div class="col-6 bg-dark text-light text-center mr-1"&gt; Hello &lt;/div&gt;
  &lt;div class="col-6  bg-danger text-light text-center"&gt; Hello &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But for some reason when Ι try to achieveit, the other item goes underneath (wraps) instead being side to side. Do you know how I can make having 6-column with some space between items and still remain side to side?</p>