title: How to Center three Div's inside another Div
body: <p>this has been trying my patience for about an hour so I thought I would ask.</p>
  
  <p>I need to have three divs, centered inside another div that is inside another div lol.  Here is what the code I have looks like.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="frontnav"&gt;
     &lt;div id="front1" class="frontboxes"&gt;
        &lt;h2&gt;Gold&lt;/h2&gt;
     &lt;/div&gt;
     &lt;div id="front2" class="frontboxes"&gt;
        &lt;h2&gt;Green&lt;/h2&gt;
     &lt;/div&gt;
     &lt;div id="front3" class="frontboxes"&gt;
        &lt;h2&gt;Blue&lt;/h2&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><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></pre>