Como centralizar três Div's dentro de outro Div

Isso vem tentando minha paciência por cerca de uma hora, então pensei em perguntar.

Eu preciso ter três divs, centrados dentro de outro div que está dentro de outro div lol. Aqui está o que o código que tenho parece.

HTML

<code><div id="frontnav">
   <div id="front1" class="frontboxes">
      <h2>Gold</h2>
   </div>
   <div id="front2" class="frontboxes">
      <h2>Green</h2>
   </div>
   <div id="front3" class="frontboxes">
      <h2>Blue</h2>
   </div>
</div>
</code>

CSS

<code>/*  FRONT PAGE BOXES */

#frontnav {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    height: 300px;
    transition: all 2s;
    -moz-transition: all 2s;
 /* Firefox 4 */
    -webkit-transition: all 2s;
 /* Safari and Chrome */
    -o-transition: all 2s;
 /* Opera */;
}

#front1 {
    text-align: center;
    float: left;
    height: 200px;
    width: 30%;
    box-shadow: 0px 0px 19px #615D69;
}

#front2 {
    text-align: center;
    float: left;
    height: 200px;
    width: 30%;
    box-shadow: 0px 0px 19px #615D69;
}

#front3 {
    text-align: center;
    float: left;
    height: 200px;
    width: 30%;
    box-shadow: 0px 0px 19px #615D69;
}

.frontboxes {
    margin: 6px;
}
</code>

questionAnswers(3)

yourAnswerToTheQuestion