我的网格不会把元素放在中间

Question

在这里发布第一篇文章，请告诉我是否遗漏了什么(比如演示文稿或其他)。

我是个开发人员，一周后我有第一个网站要做，我失败了，这周我训练的很好，但是不管我多么努力，我似乎不能把我的网格放在我的页面的中间，我把相同的填充放在我的页面的其余部分，我试着用flexbox代替，但是更糟糕的是……

我会给你看我的代码，请告诉我，或者告诉我我做错了什么。

<main>

    <!-- Banniere Top -->
    <header>
        <img src="img/header-page-catalogue.png" alt="box">
    </header>
    <!-- Banniere Top -->

    <section>
        <article>
            <div>
                <img src="img/gant-boxe-1.png" alt="boxx">
                <p>NTS DE BOXE COMBAT KONTACT</p>
            </div>
            <div>
                <a href="#">VOIR LE PRIX</a>
                <p>125€ 60€</p>
            </div>
        </article>
        <article>
            <div>
                <img src="img/gant-boxe-1.png" alt="boxx">
                <p>NTS DE BOXE COMBAT KONTACT</p>
            </div>
            <div>
                <a href="#">VOIR LE PRIX</a>
                <p>125€ 60€</p>
            </div>
        </article>
        <article>
            <div>
                <img src="img/gant-boxe-1.png" alt="boxx">
                <p>NTS DE BOXE COMBAT KONTACT</p>
            </div>
            <div>
                <a href="#">VOIR LE PRIX</a>
                <p>125€ 60€</p>
            </div>
        </article>
        <article>
            <div>
                <img src="img/gant-boxe-1.png" alt="boxx">
                <p>NTS DE BOXE COMBAT KONTACT</p>
            </div>
            <div>
                <a href="#">VOIR LE PRIX</a>
                <p>125€ 60€</p>
            </div>
        </article>
    </section>
</main>

这是我的SCSS：

body{
    font-size: 14px;
    header{
        display: flex;
        justify-content: space-between;
        height: 100%;
        padding-left: 17%;
        padding-right: 17%;
        padding-top: 2%;
        section{
            display: inline-block;
            align-self: flex-end;
        }
        nav{
            div{
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin: 10px;
                margin-right: 0;
                padding: 10px 50px;
                border: 1px;
                border-style: solid;
                background-color: lightgrey;
                img{
                    vertical-align: middle;
                }
            }
            p{
                text-align: end;
                font-size: 1.2em;
                margin-top: 0;
                margin-bottom: 0;
            }
            li{
                list-style: none;
                display: inline;
                margin-right: 15px;
                a{
                    text-decoration: none;
                    &:first-child{
                        padding-right: 30px;
                    }
                    &:last-child{
                        padding-left: 30px;
                    }
                }
            }

        }
    }
}

span{
    color: yellow;
}

main{
    background-color: darkslategrey;
    padding-left: 17%;
    padding-right: 17%;
    header{
        padding-left: 0;
        padding-right: 0;
    }
    section{
        display:grid;
        grid-template-columns: 400px 225px;
        grid-template-rows: 500px 200px;
        justify-content: center;
    }
}

这个看起来像这样(带拳击手套的4广场)：

谢谢你的阅读，希望我讲得够清楚，希望以后有知识的时候能帮助别人！

(对不起，我必须把这些照片移走，因为它们在我的学校里仍然被用来考试。)

Answer 1

试着使用：

article {
    margin: auto;
}

这将自动将这些元素集中在每个网格单元中。