How do I center element within a container while keeping them vertically aligned?

Question

Not really sure how to properly title this. It is best explained with images. I am trying to keep the items centered, but when there is too many to fit properly on one line, the new line should be aligned with the item above it, not centered within the container.

I am trying to achieve this:

Instead of this:

Here is my JSfiddle:

http://jsfiddle.net/6kwzy6La/

And my HTML:

<div class="container2">
    <div class="content">

        <div id="box">
            <p> Some text goes here </p>
        </div>

        <div id="box">
            <p> Some text goes here </p>
        </div>

        <div id="box">
            <p> Some text goes here </p>
        </div>

        <div id="box">
            <p> Some text goes here </p>
        </div>

        <div id="box">
            <p> Some text goes here </p>
        </div>

    </div>
</div>

Answer 1

http://jsfiddle.net/6kwzy6La/

Container1
{
text-align: center;
}

Container2
{
text-align: left;
}