Bojan:

I am trying to figure out if there is a way to align the last row to the left as oppose to center. In the following JsFiddle you will see that when you resize screen the divs adjust how many show in a row and Evenly spaces around them. Except that the last row also does the same thing. Problem is that the last row is an uneven number always and as such I would like the last row to maintain same spacing as the previous rows, just start form the left.

I tried doing this with floats, display inline-block, and Flex, but having no luck. Here is my latest attempt:

.wrapper{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.item{
  width: 140px;
  height: 50px;
  background-color: blue;
  margin: 10px auto;
}

https://jsfiddle.net/yme1msj7/3/

EDIT:

The answer doesn't have to use flex. I'm open to any suggestions of making this work that does not involve javascript.