DIVs grid

grid vertical problem.

HTML

<div class="container">
    <div class="box box-1"></div>
    <div class="box box-2"></div>
    <div class="box box-3"></div>
    <div class="box box-4"></div>
    <div class="box box-5"></div>
    <div class="box box-6"></div>
</div>

CSS

.container {
    width 650px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid black;
}

.box {
    width: 192px;
    margin: 2.5px;
    border: 1px solid #c8c8c8;
    float: left;
    background-color: green;
}

.box-1, .box-3, .box-5 {
    height: 120px;
}

.box-2, .box-4, .box-6 {
    height: 100px;
}

.box-5 {
    background-color: red !important;
}