[调整页面大小时如何在CSS中将这些框居中？

Question

我有以下方框（文章）

当我尝试调整页面大小时，它变成这样：

我希望它在调整窗口大小时自动居中，以避免在右侧留出巨大的空白，但是它必须与现有格式相同。基本上只是将整个组移到中间，而不使单个框居中，因为我希望它们如图所示向左浮动。

这是我当前的CSS：

* 
    margin: 0;
    padding: 0;


html, body 
    height: 100%;


.container 
    width: 90%;
    height: 100%;
    overflow: hidden;
    background: skyblue;
    margin: auto;
    padding: 20px;


.container article 
    float: left;
    width: 250px;
    height: 250px;
    background: blue;
    margin: 25px

和我的html：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Shop</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="container">
            <article>
                <h2>Hello</h2>
            </article>
            <article>
                <h2>Hello</h2>
            </article>
            <article>
                <h2>Hello</h2>
            </article>
            <article>
                <h2>Hello</h2>
            </article>
            <article>
                <h2>Hello</h2>
            </article>
        </div>
    </body>
</html>