Bootstrap equal columns missing border

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

by Robert Bram

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-sm-3" id="sidebar">
      <div>
        <p>menu item</p>
        <p>menu item</p>
        <p>menu item</p>
      </div>
    </div>
    <div class="col-sm-9" 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;
}

/* Flexbox Equal Height Bootstrap Columns (fully responsive) */
@media only screen and (min-width : 481px) {
  .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 {
   background: #B3D6B3;
   border: solid 10px #D6E9D6;
   margin: 0;
}

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