Personal Portfolio Webpage

Hello
My code passes but it doesn’t behave like I would
I’d like to have a navbar with a width that takes 100% of the screen, and not more like my code does

my html

<!DOCTYPE html>
<html lang="fr">
  
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" href="styles.css" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>

    <body>

        <header id="header">
            <nav id="navbar">
                <a class="nav-link" href="#welcome-section">À propos</a>
                <a class="nav-link" href="#projects">Projets</a>
                <a class="nav-link" href="#profile">Contact</a>
            </nav>
        </header>
        <div id="reste">
            <!-- welcome session. elle doit prendre 100%largeur & 100% hauteur   -->
            <section id="welcome-section">
                <h1>Bienvenue sur mon portfolio</h1>
            </section>
            <section id="projects">
                <h2>Mes principaux projets</h2>
                <div id="grid-elements">
                    <div class="project-tile">
                        <div class="tile-up"><img src="assets/pizza.jpeg"></div>
                        <div class="tile-bottom"><a href="https://github.com/morgane-du-tweize/lamamma">La Mamma pizzeria</a></div>
                    </div>

                    <div class="project-tile">
                        <div class="tile-up"><img src="assets/pendu.jpg"></div>
                        <div class="tile-bottom"><a href="https://github.com/morgane-du-tweize/Hangman">Jeu du pendu</a></div>
                    </div>

                    <div class="project-tile">
                        <div class="tile-up"><img src="assets/advent.jpg"></div>
                        <div class="tile-bottom"><a href="https://github.com/morgane-du-tweize/adventofcode2021">Advent of Code 2021</a></div>
                    </div>

                    <div class="project-tile">
                        <div class="tile-up"><img src="assets/to do list.jpg"></div>
                        <div class="tile-bottom"><a href="https://github.com/morgane-du-tweize/todolist">To-do list</a></div>
                    </div>

                    <div class="project-tile">
                        <div class="tile-up"><img src="assets/cafe.jpg"></div>
                        <div class="tile-bottom"><a href="https://github.com/morgane-du-teize/mr_coffee">Mr Coffee</a></div>
                    </div>

                    <div class="project-tile">
                        <div class="tile-up"><img src="assets/biblio.jpg"></div>
                        <div class="tile-bottom"><a href="https://github.com/morgane-du-tweize/Bibliotheque">Bibliothèque</a></div>
                    </div>

                    <div class="project-tile">
                        <div class="tile-up"><img src="assets/CSS_icon.svg"></div>
                        <div class="tile-bottom"><a href="https://github.com/morgane-du-tweize/HTML-CSS-works">My HTML and CSS projects</a></div>
                    </div>

                    <div class="project-tile">
                        <div class="tile-up"><img src="assets/travel.jpg"></div>
                        <div class="tile-bottom"><a href="https://github.com/morgane-du-tweize/retravel">Travel project</a></div>
                    </div>

                </div>

            </section>

            <section id="profile">
                <h2>Pour me retrouver</h2>
                <div id="bottom-links">
                    <div class="bottom-profile"><a href="http://www.france-ioi.org/user/perso.php?sLogin=applefield">France IOI profile</a> </div>
                    <div class="bottom-profile"><a href="https://github.com/morgane-du-tweize">GitHub profile</a> </div>
                    <div class="bottom-profile"><a id="profile-link" target="_blank">Codewars profile</a> </div>

                </div>
            </section>

            <footer></footer>
        </div>



    </body>
</html>

my css

body {
    font-family: sans-serif;
}

a:link, a:visited, a:hover, a:active {
    color: #000;
    text-decoration: none;
}

header {
    width: 100%;
}

#navbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: fixed;
    top: 0px;
    height: 140px;
    width: calc(100vw - 15px);
    background-color: #f3e6ff;
    z-index: 1;
}

.nav-link {
    font-size: 1.5rem;
    margin: 15px;
}

#reste {
    position: absolute;
    top: 141px;
    background-color: blueviolet;
}

h1 {
    color: white;
    font-size: 3.5rem;
    font-weight: bold;
    margin: 0;
    position: relative;
    top: 45%;
    left: 25%;
}

#welcome-section {
    top: 0;
    background-color: blueviolet;
    width: 100vw;
    height: 100vh;
}

#projects {
    background-color: #ffcc99;
    padding-bottom: 100px;
    bottom: 0px;
}

#projects > h2 {
    padding: 75px;
    text-align: center;
    font-size: 2rem;
}

#grid-elements {
    display: grid;
    gap: 100px;
    grid-template-columns: auto auto auto;
    position: relative;
    left: 100px;
}

bottom-links > a:link, bottom-links > a:visited, bottom-links > a:hover, bottom-links > a:active {
    color: white;
    text-decoration: none;
}

.project-tile {
    height: 400px;
    width: 400px;
}

.tile-up {
    position: relative;
    top: 0;
    object-fit: cover;
}

img {
    height: 350px;
    width: 400px;
}

.tile-bottom {
    height: 50px;
    background-color: #000;
    position: relatve;
    display: flex;
    bottom: 0;
    align-items: center;
    font-weight: 3rem;
    justify-content: center;
}

.tile-bottom > a {
    color: white;
}


#profile{
    top: 0px;
    width: 100vw;
    height: 100vh;
    background-color: #000066;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#footer-links {
    display: flex;
    justify-content: space-evenly;
}

#profile > h2 {
    font-size: 3.5rem;
}

#bottom-links {
    display: flex;
    justify-content: space-around;
    width: 100%;
}

.bottom-profile, .bottom-profile > a {
    margin: 25px;
    font-size: 2rem;
    color: white;
}


@media only screen and (max-width: 1200px) {
    #grid-elements {
        grid-template-columns: auto auto;
    }
}

@media only screen and (max-width: 800px) {
    #grid-elements {
        grid-template-columns: auto;
    }
}

Thank you in adavnce

within navbar 0 is did not need any value of px, % etc…

To fix your navbar width issue, change width: calc(100vw - 15px); to width: 100vw; in your CSS for #navbar. agencia de digital marketing