put divs in line and center them

floated div without using float property and centering the elements when the width dimensions space is not enough

by heriberto perez

HTML

<div id='main-container'>
  <div class='box2'><p>Some content goes here</p></div>
  <div class='box2'><p>Some content goes here</p></div>
  <div class='box2'><p>Some content goes here</p></div>
  <div class='box2'><p>Some content goes here</p></div>
  <div class='box2'><p>Some content goes here</p></div>
</div>

CSS

.box2 {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 2px;
  background: yellow;
}
#main-container {
  text-align: center;
}