The numbers are in the wrong order, and the items do not fit on one line yet.
Make it so that the elements are spread over several lines.
Each line must contain the numbers in the correct order.
Cells must be aligned to the left (hint - if the order of the elements in the row is reversed, the value of the justify-content property also changes direction).
The number in each cell should be in the middle (use flexbox for this).

This task is part of the Full-Stack JavaScript Course
If you have any issues with it, you can ask for community help below the post
Feel free to help others if you’ve already solved the task

index.html

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: flex;
        border: 1px solid red;
        padding: 15px;
      }
      .item {
        background-color: rgb(255, 198, 0);
        width: 20vw;
        height: 20vw;
        font-size: 10vw;
        font-style: italic;
        font-family: Tahoma;
        margin: 10px;
        flex-shrink: 0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">4</div>
      <div class="item">3</div>
      <div class="item">2</div>
      <div class="item">1</div>
      <div class="item">7</div>
      <div class="item">6</div>
      <div class="item">5</div>
    </div>
  </body>
</html>