这里的第一篇文章，如果我遗漏了什么，请随时告诉我（比如演示文稿类型或其他）

我是一个在培训的开发人员，我有我的第一个网站做了一个星期后，我失败了，这周我正在训练做正确的，但无论我如何努力尝试，似乎我不能得到我的网格放置在我的页面的中心，我确实把同样的填充我的页面的其余部分，我尝试了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个方块）:

https://ibb.co/td2ctdn

谢谢你的阅读，希望我明白了，希望以后有了知识以后能帮助别人！