Align float divs to center but last not full row to left

Question

I've got list with float items

ul {
  height: 204px;
  border: 1px solid #f0f;
  margin: 10px;
  padding: 0;
}

ul:nth-child(1) {
  width: 299px;
}

ul:nth-child(2) {
  width: 399px;
}

li {
 display: block;
 float: left;
 width: 100px;
 height: 100px;
 border: 1px solid #000;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li> 
</ul>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li> 
</ul>

The problem is that on some display resolutions there is up to 100px empty space on right side.

I need some solution that will divide margin to same parts (50px on left and 50px on right) but keep columns, so in second ul forth li should stay exactly under first.

PS

Because of the need to keep the alignment of the columns

ul {
  text-align: center;
}

li {
  display: inline;
}

is not suitable.

Mediaqueries for all possible resolutions are also not suitable.

Thanks for help