Aide grille CSS

aggie7
Les bases HTML/CSS

Bonjour à tous, je débute dans le codage et j'essaye de créer un site web simple à plusieurs pages.
J'ai rencontré un problème lorsque je n'arrivais pas à modifier la position d'un élément "section" dans ma grille et je ne comprends pas pourquoi. J'ai d'abord cherché par moi-même avant de demander l'aide de chatGPT mais ce qu'il m'a proposé ne fonctionne pas.
Mon "body" contient bien un "grid-container" et mon display dans css contient bien "grid".
Voici mon code html : 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles/style.css">
    <title>Fabiann-art</title>
</head>

<body class="grid-container">
    <header>
        <h1>Fabiann-art</h1>
        <nav>
            <ul>
                <li><a href="site_maman.html"></a>Accueil</li>
                <li><a href="créations.html"></a>Créations</li>
                <li><a href="àpropos.html"></a>À propos</li>
                <li><a href="contact.html"></a>Contact</li>
            </ul>
        </nav>
    </header>
    <main>
        <figure>
            <img class="fabianna" src="images/maman.jpg" alt="Fabianna" width="300" height="300">
        </figure>

        <section class="présentation">
            <h3>Lorem</h3>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta quae ducimus consequuntur sit id libero
                nam unde, eaque ullam modi obcaecati perspiciatis in ad autem repellendus voluptatibus, dolore quaerat
                quo?</p>

            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium totam non asperiores nulla dolor
                perferendis ratione distinctio nobis quaerat beatae repellat iure iste nemo deleniti, ad et
                repudiandae quas quisquam.</p>
        </section>
    </main>

Et voici mon code css : 

@import url('https://fonts.googleapis.com/css2?family=Shalimar&display=swap');

/*Grille*/
.grid-container {
    display: grid;
    grid-template-columns: repeat(5, auto);
}

/*Général*/
body {
    background-color: #FFFFEB;
    margin: 0;
    padding: 0;
}

header {
    display: flex;
    flex-direction: column;
    background-color: #4B384C;
    grid-column: 1/-1;
}

/*Titres*/
h1 {
    font-family: "Shalimar", serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    font-size: 100px;
    color: #FFFFEB;
    margin-bottom: 2px;
}

/*Nav*/
nav {
    text-align: center;
}

nav ul {
    list-style: none;
    padding: 0;
    margin-top: 2px;
}

nav ul li {
    display: inline-block;
    font-family: "Shalimar", serif;
    font-weight: 400;
    font-size: 30px;
    color: #FFFFEB;
    border-radius: 5px;
    margin: 5px;
    /* Espacement entre les onglets */
}

nav ul li a {
    text-decoration: none;
    font-family: "Shalimar", serif;
    border-radius: 5px;
}

nav ul li:hover {
    color: #4B384C;
    background-color: #FFFFEB;
    transition: background-color 0.5s ease, color 0.5s ease;
}

nav ul li a:hover {
    color: #4B384C;
    background-color: #FFFFEB;
}

/*Images*/
img.fabianna {
    border-radius: 30%;
    grid-column: 1/3;
}

/*Présentation*/
section.présentation {
    border: 3px;
    border-style: solid;
    border-color: red;
    grid-column: 3/6;
    padding: 10px;
    margin : 30px
}

Merci d'avance!

Aucune réponse