Center Inline-blocks Keeping Text-align Left

I have a group of items. Is it possible to center the whole group but make sure items on new lines appear on the left and not the center? Here is the example: http://codepen.io/ano

Solution 1:

if you add the correct margin or padding to ul container, it should be fine : 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:0100px;
}

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

Solution 2:

Assuming that the li elements will be a static width, you could just add the following style to the ul element:

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