html - Center Child dynamic divs -

i have centered div horizontally. cont1 div parent div . take width of device. , cont2 child div take width according content. , number of child div dynamic . divs centered . issue last div. want last div @ left side. have tried lots of techniques. unable fix .

i dont want use javascript or jquery .

here fiddle link fiddle link

here html

<div class="cont1">     <div class="cont2">         <div class="child">  </div>           <div class="child">  </div>           <div class="child">  </div>           <div class="child">  </div>           <div class="child">  </div>           <div class="child">  </div>           <div class="child">  </div>           <div class="child">  </div>           <div class="child">  </div>          <div class="child">  </div>      </div> </div> 

here css

.cont1 {     background-color: #e6e6e6;     height: auto;     margin: 0 auto;     min-width: 600px;     position: relative;     text-align: center;     width: 840px; } .cont2 {     display: inline;     text-align: left; } .child{      display: inline-block;     margin: 4px;     max-width: 230px;     width: 30%; height:100px;     background-color:red; } 

demo

css

.cont1 {     background-color: #e6e6e6;     height: auto;     margin: 0 auto;     min-width: 600px;     position: relative;     width: 840px;     text-align: left; /* make left */ }  .cont2 {     /* display: inline; remove */     max-width:600px; /* add */     margin:auto; /* add */ }