Bootstrap - How to keep space between bootstrap columns while resizing (vertical and horizontal)?

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!!!

http://jsfiddle.net/humotrj0/604/

HTML:

<header id="home">
    <div class="container-fluid">
        <div class="row center-block home_boxes_row">
            <div class="col-sm-4">
                <div class="col-xs-12 home_box_left">
                   <p>teststetsttsgdbdshchdchdchdfvhfvhfvndvhdvvf</p>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="col-xs-12 home_box_right"></div>
            </div>
            <div class="col-sm-4">
            </div>
        </div>
    </div>
</header>

CSS:

#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;
    }
  }

}

Boostrap is built with responsiveness in mind. Thereby, setting the width of the two columns to a pixel width, will in most cases break the layout. The width should rather be left to be handled by bootstrap.

The following snippets should provide you what you seek.

Spacing is achieved by creating a div inside of the columns, and then setting margins. I have added separate classes for this (.spacing_right and .spacing_left).

I have used Bootstrap 4, but it should work with Bootstrap 3 as well.
Note: bootstrap 4 has replaced the col-xs-* with col-*.

#home {
  overflow: auto;
  height: 1100px;
  width: 100%;
  background-image: url("https://media-cdn.tripadvisor.com/media/photo-s/0e/85/48/e6/seven-mile-beach-grand.jpg");
  background-size: cover;
}

.home_boxes_row {
  margin-top: 200px;
}

.home_box_left {
  background-color: orange;
  margin-top: 5px;
}

.home_box_right {
  background-color: red;
  margin-top: 5px;
}

.spacing_right {
  height: 100%;
  margin-right: 25px;
  background-color: green;
}

.spacing_left {
  height: 100%;
  margin-left: 25px;
  background-color: green;
}
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>

  <body>
    <header id="home">
      <div class="container-fluid">
        <div class="row home_boxes_row">
          <div class="col-sm-6 col-6 home_box_left">
            <div class="spacing_right">
              <p>Test test teasdasdst</p>
            </div>
          </div>
          <div class="col-sm-6 col-6 home_box_right">
            <div class="spacing_left">
              <p>Test test teasdasdst</p>
            </div>

          </div>
        </div>
      </div>
    </header>
  </body>

</html>