Bootstrap equal columns missing border

Trying to use Bootstrap equal columns and put borders on the outside left and right.

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div class="row flex-row">
    <div class="col-xs-6 col-sm-3" id="sidebar">
      <div>
        <p>menu item</p>
        <p>menu item</p>
        <p>menu item</p>
      </div>
    </div>
        <div class="col-xs-6 col-sm-3" id="one">
      <div>
        <p>menu item</p>
        <p>menu item</p>
        <p>menu item</p>
      </div>
    </div>
        <div class="col-xs-6 col-sm-3" id="two">
      <div>
        <p>menu item</p>
        <p>menu item</p>
        <p>menu item</p>
      </div>
    </div>
    <div class="col-xs-6 col-sm-3" id="main">
      <div>
        <p>actual content</p>
        <p>actual content</p>
        <p>actual content</p>
        <p>actual content</p>
        <p>actual content</p>
        <p>actual content</p>
        <p>actual content</p>
      </div>
    </div>
  </div>
</div>

CSS

.container-fluid {
   padding-left: 0px;
   padding-right: 0px;
}

  .flex-row.row {
    display: flex;
	 flex-wrap: wrap;
  }
  .flex-row.row > [class*='col-'] {
    display: flex;
    flex-direction: column;
    flex-grow: 0;
  }
  .flex-row.row:after,
  .flex-row.row:before {
	 display: flex;
  }
/*   .flex-row.row > [class*='col-'] > .box {
    display: flex;
     flex: 1;
  } */
  
/* Flexbox Equal Height Bootstrap Columns (fully responsive) */
@media only screen and (min-width : 300px) {
/*   .flex-row.row {
    display: flex;
     flex-wrap: wrap;
  }
  .flex-row.row > [class*='col-'] {
    display: flex;
    flex-direction: column;
  }
  .flex-row.row:after,
  .flex-row.row:before {
     display: flex;
  }
  .flex-row.row > [class*='col-'] > .box {
    display: flex;
     flex: 1;
  } */
}

#sidebar, #one, #two {
   background: #B3D6B3;
   border: solid 10px #D6E9D6;
   margin: 0;
}

#main {
   background: pink;
   border: solid 10px #D6E9D6;
   /* border-left: 0px; */
   margin: 0;
}