Center line blocks keep text aligned to the left

Question

I have a group of elements. Is it possible to focus the whole group, but make sure that the elements on new lines appear on the left, and not in the center?

Here is an example: http://codepen.io/anon/pen/yczku/

And this is what I need: http://f.cl.ly/items/103O0n0h2N0n1k163E26/result.png

Notice that the group of green cells is centered inside the red container, but each new row is still left aligned.

I should mention that the solution should not rely on a fixed width (and set a fixed padding or something like that). I use the static width in the container in the example to make sure that it displays on all screens of the same size. In my final project, this structure has a dynamic width.

I know that I can achieve what I need using JavaScript / jQuery, but I am wondering if there is only a CSS solution.

Edit:

Each green cell in the example has a static width, but together as a group they should fill all the free space. Therefore, if the container was made wider, more than 3 items will fit in the first row, and vice versa - if the container was already narrower, each line will contain only 2 or 1 element.

Answer 1

margin padding ul, : http://codepen.io/anon/pen/Drtoa/

* {
  margin: 0;
  padding: 0;
}

.container {
  border: 5px solid red;
  width: 800px; /* Will be dynamic! */
  margin: 0 auto;
}

ul {
  margin:0 100px;
}

li {
  border: 5px solid green;
  width: 200px;
  height: 200px;
  display: inline-block;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

Answer 2

, li , ul:

ul {
  width: 630px;
  margin: 0 auto;
}