CSS Flex grid items - centered using justify-content property

_mixins.scss

@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin flex-flow($values) {
  -webkit-flex-flow: $values;
  -moz-flex-flow: $values;
  -ms-flex-flow: $values;
  flex-flow: $values;
}

@mixin flex-order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}

@mixin flex-direction($val) {
  -webkit-box-direction: $val;
  -moz-box-direction: $val;
  -webkit-flex-direction: $val;
  -ms-flex-direction: $val;
  flex-direction: $val;
}

@mixin box-sizing ($box) {
//  content-box | border-box | inherit
  -webkit-box-sizing: $box;
     -moz-box-sizing: $box;
      -ms-box-sizing: $box;
       -o-box-sizing: $box;
          box-sizing: $box;
}



// container grid system
@mixin column($percentage, $float-direction:left) {
  width: 100% * $percentage;
  float: $float-direction;
}



// Clearfix
@mixin clearfix {
  &:after {
    content:"";
    display:table;
    clear:both;
  }
}

sinppet.html

<div class="container">
  <div class="restaurants-grid-container">
    <div class="restaurant-item">1</div>
    <div class="restaurant-item">2</div>
    <div class="restaurant-item">3</div>
    <div class="restaurant-item">4</div>
    <div class="restaurant-item">5</div>
    <div class="restaurant-item">6</div>
    <div class="restaurant-item">7</div>
    <div class="restaurant-item">8</div>
    <div class="restaurant-item">9</div>
    <div class="restaurant-item">10</div>
    <div class="restaurant-item">11</div>
    <div class="restaurant-item">12</div>
    <div class="restaurant-item">13</div>
    <div class="restaurant-item">14</div>
    <div class="restaurant-item">15</div>
    <div class="restaurant-item">16</div>
  </div>
</div>

style.scss

/*
 * Container - Centering the page content.
 * 
 */

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #FFF;

  &::after { /* Clearfix */
      content: '';
      display: table;
      clear: both;
  }
}

.restaurants-grid-container {
  width: 100%;
  margin: 0 auto;
  @include flexbox();
  @include flex-flow(row wrap);
  background: #ddd;
  padding: 1em;
  -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
}

.restaurant-item {
  background-color: #FFF;
  @include flex(1 215px);
  min-width: 215px;
  max-width: 215px;
  width: 215px;
  height: 250px; 
  border: 0px solid #eee;
  box-shadow: 0px 1px 3px 0px rgba(125,125,125,0.87);
  border-radius: 4px;
  margin: 0 5px 10px 5px;
}