how to left align many rows of inline divs, that together are centered in the screen (regardless of screen size)

I have several inline divs, inside a table cell, that are all left aligned, and will wrap to the next row when there is no more space. For the most part, they look pretty good, and rearrange to properly fill the screen.

The problem is when the width of the screen is JUST SHY OF the size necessary to fit another element on the right. There is a big gap on the right side of the screen, compared to the left. It's a stylistic choice, but I am trying to figure out a way to balance the margins on both sides, no matter what the screen size is. Here is my site as it looks currently: http://ift.tt/1T0115V

desired result, plus 2 incorrect results that I have achieved

I am trying to get something that allows each individually to be left aligned, in a group that is centered. Instead I can either get everything left aligned (but the extra space at right looks bad, especially on small screens), or everything centered (which looks bad when there is only one item on the bottom row).

I've been beating my head against a wall, and can't seem to find any-one doing something similar. It doesn't seem too crazy does it?