Центр центрирования

Question

У меня возникла проблема с центрированием div «#offer» в разделе «.tight». Я не хочу использовать «position: absolute»; из-за возможности корректного отображения сайта в экранах ширины 1024 пикселя.

Вот HTML:

<section class="main"> 
    <section class="tight"> 
     <div id="offers"> 
     <article class="offer"> 
      <div id="offer_stats"></div> 
      text 
     </article> 
     <article class="offer"> 
      <div id="offer_comp"></div> 
      text 
     </article> 
     <article class="offer last"> 
      <div id="offer_time"></div> 
      text 
     </article> 
     </div> 
    </section> 
</section> 

И CSS:

section.main { 
    min-width: 880px; 
    max-width: 1200px; 
    margin: 0 auto; 
} 
section.tight { 
    width: 100%; 
    margin: 0 auto; 
    float: left; 
} 
#offers { 
    float: left; 
    padding-bottom: 100px; 
    text-align: center; 
} 
article.offer { 
    float: left; 
    min-height: 178px; 
    width: 260px; 
    color: #59535e; 
    padding-right: 50px; 
} 
article.offer.last { 
    padding-right: 0; 
} 
article.offer div { 
    height: 178px; 
} 
#offer_stats { 
    background: url("../images/offer_stats.png") no-repeat; 
} 
#offer_comp { 
    background: url("../images/offer_comp.png") no-repeat; 
} 
#offer_time { 
    background: url("../images/offer_time.png") no-repeat; 
} 

PrintScreen:

Любые предложения?

Answer 1

section.main { 
    width: 880px; 
    max-width: 1200px; 
    margin: 0 auto; 
} 

Answer 2

Во-первых, я предлагаю вам удалить float: left; из #offers

#offers { 
    padding-bottom: 100px; 
    text-align: center; 
} 

Во-вторых, я предлагаю вам использовать display: inline-block; вместо float: left; в article.offer

article.offer { 
    display: inline-block; 
    min-height: 178px; 
    width: 260px; 
    color: #59535e; 
    padding-right: 50px; 
} 

Смотрите эту jsfiddle