Center div width depending on content - html

Question

I am trying to achieve something that looks like this:
I don't know how many green elements will be rendered, because that is determined by the CMS and how many components the author decides to put in there.
The requirement is that there are 5 boxes per row before it wraps.
The problem is: margin: auto doesn't work when I set the red wrapper to inline-block.
div.container {
background: black;
padding: 10px;
}
div.wrapper {
margin: 0 auto;
background: red;
padding: 10px;
display: inline-block;
}
div.box {
display: inline-block;
background: lime;
padding: 10px;
margin: 0 10px;
}
<div class="container">
<div class="wrapper">
<div class="box">
Content 1
</div>
<div class="box">
Content 2
</div>
</div>
</div>

Answer 1

div.container {
background: black;
padding: 10px;
text-align: center;
}
div.wrapper {
margin: 0 auto;
background: red;
padding: 10px;
display: inline-block;
}
div.box {
display: inline-block;
background: lime;
padding: 10px;
margin: 0 10px;
}
<div class="container">
<div class="wrapper">
<div class="box">
Content 1
</div>
<div class="box">
Content 2
</div>
</div>
</div>
just add text-align center to div.container

Answer 2

As Muhammad Usman suggested, add text-align: center to .container. The text-align-property always refers to the content of the target element.
div.container {
background: black;
padding: 10px;
text-align: center;
}
div.wrapper {
margin: 0 auto;
background: red;
padding: 10px;
display: inline-block;
}
div.box {
display: inline-block;
background: lime;
padding: 10px;
margin: 0 10px;
}
<div class="container">
<div class="wrapper">
<div class="box">
Content 1
</div>
<div class="box">
Content 2
</div>
</div>
</div>

Answer 3

Give the container div this property
text-align: center;
Here's a fiddle

Answer 4

Centering with margin: auto doesn't work for elements that have inline-block as display property.
You can, however, just center such elements by setting the text-alignment of their parent elements to center. Then, (re)set the text-alignment of the elements you want to center to whatever text-alignment you need there.
Demo
.container {
background: black;
padding: 10px;
text-align: center; /* Center */
}
.wrapper {
margin: 0 auto;
background: red;
padding: 10px;
display: inline-block;
text-align: left; /* Reset alignment */
}
.box {
display: inline-block;
background: lime;
padding: 10px;
margin: 0 10px;
}
<div class="container">
<div class="wrapper">
<div class="box">
Content 1
</div>
<div class="box">
Content 2
</div>
</div>
</div>
See also this Fiddle!