title: Bootstrap - How to keep space between bootstrap columns while resizing (vertical and horizontal)?
body: <p>I created space between my bootstrap columns using columns insight columns. However, when I start resizing the window, the distance between the columns gets smaller and disappears eventually, both columns start overlapping ech other. How can I keep the space when resizing using bootstrap? Thanks!!!</p>
  
  <p><a href="http://jsfiddle.net/humotrj0/604/" rel="nofollow noreferrer">http://jsfiddle.net/humotrj0/604/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;header id="home"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="row center-block home_boxes_row"&gt;
              &lt;div class="col-sm-4"&gt;
                  &lt;div class="col-xs-12 home_box_left"&gt;
                     &lt;p&gt;teststetsttsgdbdshchdchdchdfvhfvhfvndvhdvvf&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-4"&gt;
                  &lt;div class="col-xs-12 home_box_right"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-4"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#home {
    height: 1100px;
    background-image: url("https://media-cdn.tripadvisor.com/media/photo-s/0e/85/48/e6/seven-mile-beach-grand.jpg");
    background-size: cover;
    width: 100%;
    .home_boxes_row {
      margin-top: 200px;
      .home_box_left {
        width: 300px;
        height: 300px;
        background-color: $green;
        padding: 5px;
      }
      .home_box_right {
        width: 300px;
        height: 300px;
        background-color: $blue;
        padding: 5px;
      }
    }
  
  }
  </code></pre>