<div class='row'>

  <div class='con'>

    <div class="col">

      <span></span>

    </div>

    <div class="col">

      <span></span>

    </div>

    <div class="col">

      <span></span>

    </div>

    <div class="col">

      <span></span>

    </div>

    <div class="col">

      <span></span>

    </div>

    <div class="col">

      <span></span>

    </div>

    <div class="col">

      <span></span>

    </div>

    <div class="col">

      <span></span>

    </div>

  </div>

</div>

.row{

  width:100%;

  text-align:center;

}

.row .con {

  max-width:400px;

  margin: 0 auto;

}

.row .con:after{

  content:'';

  clear:both;

  display:block;

}

.row .con .col {

  float:left;

  width:12.5%;

  text-align:center;

}

.row .con .col span{

  width:40px;

  height:40px;

  background-color:red;

  display:inline-block;

}