Prevent Div from filling parent Div width after it wraps - html

Question

I am trying to center a div within its parent div like so:
<div id="wrapper">
<div id="yourdiv">
<div id='one'>1</div>
<div id='two'>2</div>
<div id='one'>1</div>
<div id='two'>2</div>
<div id='one'>1</div>
<div id='two'>2</div>
</div>
</div>
#wrapper {
background-color: green;
text-align: center;
}
#yourdiv {
background-color: red;
display: inline-block;
}
#yourdiv > div
{
float: left;
width: 200px;
}
#one {
background-color: blue;
}
#two {
background-color: brown;
}
This works fine when the child div does not 'wrap' as you can see below.
However, once there are too many child elements to fit the page width, the elements wrap to a second row and 'yourdiv' fills its parent width like so:
The child elements are no longer centered on the page because 'yourdiv' now fills its parents width. How can I fix it so that 'yourdiv' shrinks its width to its content so that the child elements are centred no matter how many there are?
EDIT:
The desired result is:

Answer 1

I recommend using flexbox.
To center your elements horizontally use
display: flex;
justify-content: center;
flex-wrap: wrap;
on the container.
Play around with flex-grow, min-width and max-width on the children to tune your layout.

Answer 2

Turn your css to flex and it's too much easier. Your just have to set #yourdiv flex-wrap: wrap; to make it wrap when overflow and justify-content: center; to center child element:
#wrapper {
background-color: green;
text-align: center;
}
#yourdiv {
background-color: red;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#yourdiv>div {
float: left;
width: 200px;
}
#one {
background-color: blue;
}
#two {
background-color: brown;
}
<div id="wrapper">
<div id="yourdiv">
<div id='one'>1</div>
<div id='two'>2</div>
<div id='one'>1</div>
<div id='two'>2</div>
<div id='one'>1</div>
<div id='two'>2</div>
</div>
</div>

Answer 3

You should use Flexbox for those cases, you should read those good articles:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
and play this game to understand Flexbox while playing a game:
https://flexboxfroggy.com/
#wrapper {
background-color: green;
text-align: center;
}
#yourdiv {
background-color: red;
display: flex;
justify-content: center;
}
#yourdiv > div {
min-width: 100px;
}
.one {
background-color: blue;
}
.two {
background-color: brown;
}
<div id="wrapper">
<div id="yourdiv">
<div class="one">1</div>
<div class="two">2</div>
<div class="one">1</div>
<div class="two">2</div>
<div class="one">1</div>
<div class="two">2</div>
<div class="one">1</div>
<div class="two">2</div>
<div class="one">1</div>
<div class="two">2</div>
</div>
</div>