Question: I'd like to center a list of elements in a page without redimensioning the elements and at the same time, fit as much as possible in the same row.
I manage to do it with several @media rules for each screen size from 1 element per row up to 4 elements, but I'd like to know if there is a way to do it in a way that it would fit whatever the width of the page is.
Here is what I've tried and works:

```css
.container {
  display: flex;
  width: max-content;
  flex-wrap: wrap;
  flex-direction: row;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (min-width: 294px) { .container {
  width: 290px;
}}
@media only screen and (min-width: 584px) { .container {
    width: 580px;
}}
@media only screen and (min-width: 874px) { .container {
    width: 870px;
}}
@media only screen and (min-width: 1164px) { .container {
    width: 1160px;
}}

.rectangle {
  width: 286px;
  height: 180px;
  margin-right: 2px;
  margin-left: 2px;
  margin-bottom: 24px;
  background: #aeaeae;
}
```

```html
<div class="container">
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
</div>
```

Answer: 
What I like to do when trying to accomplish this is setting `text-align: center;` on the container, (.container in your case). Then for the elements you're wanting to have be centered, setting the display property to `display: inline-block;` (.rectangle in your case). This will put as many elements that'll fit, on to one line. And anything that doesn't fit on to the next, still centered. When you resize your window, the elements move down to the next line as needed.

Change your css to this:

```
    .rectangle {
  width: 286px;
  height: 180px;
  margin-right: 2px;
  margin-left: 2px;
  margin-bottom: 24px;
  background: #aeaeae;
  display: inline-block
}
   .container {
  /*display: flex;
  width: max-content;*/
  flex-wrap: wrap;
  flex-direction: row;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

```

You'll need to comment out the first two lines in .container for this to work properly. Hopefully this works for you!

EDIT: I thought originally you were wanting your elements to be centered. Now I'm not sure. If you're wanting elements that are on subsequent lines to be left aligned like in your snippet, change `text-align: center;` to `text-align: left;`.

```css
.rectangle {
            width: 286px;
            height: 180px;
            margin-right: 2px;
            margin-left: 2px;
            margin-bottom: 24px;
            background: #aeaeae;
            display: inline-block;
        }

        .container {
            /*display: flex;
            width: max-content;*/
            flex-wrap: wrap;
            flex-direction: row;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
```

```html
<div class="container">
        <div class="rectangle"></div>
        <div class="rectangle"></div>
        <div class="rectangle"></div>
        <div class="rectangle"></div>
        <div class="rectangle"></div>
    </div>
```
```css
.container {
  display: flex;
  width: max-content;
  flex-wrap: wrap;
  flex-direction: row;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (min-width: 294px) { .container {
  width: 290px;
}}
@media only screen and (min-width: 584px) { .container {
    width: 580px;
}}
@media only screen and (min-width: 874px) { .container {
    width: 870px;
}}
@media only screen and (min-width: 1164px) { .container {
    width: 1160px;
}}

.rectangle {
  width: 286px;
  height: 180px;
  margin-right: 2px;
  margin-left: 2px;
  margin-bottom: 24px;
  background: #aeaeae;
}
```

```html
<div class="container">
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
</div>
```