Xtykutl

I have the following example: https://jsfiddle.net/fbwv8jhp/
with the following styles:

.menus {

  height: 200px;

  width: auto;

  margin: auto;

}



.menu{

  width: 200px;

  height: 30px;

  float: left;

  border: 2px solid red;

  margin-left: 10px;

  margin-bottom: 10px;

}

Here, menu elements are aligned to left. But the additional desired behavior is to make sure that regardless the screen width (i.e. the quantity of menu divs shown in each row), they are displayed at the center. This means that in each row the distance between left menu and left screen border and right menu and right screen border should be the same, and all menus centered.
Couldn't make it, so maybe someone knows how this can be achieved.

On the image below, distances 1 and 2 should be equal.

Try using css flex-box:

.menus {

  height: 200px;

  width: auto;

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

}



.menu{

  width: 200px;

  height: 30px;

  float: left;

  border: 2px solid red;

  margin-left: 10px;

  margin-bottom: 10px;

}