Wczoraj zacząłem - problem html+css

pytanie zadane 17 lipca 2020 w HTML i CSS przez riger Nowicjusz (120 p.)

Cześć, ustawiłem menu na 25 procent szerokości a mimo to schodzi jedno pod drugie. Korzystam z poradników na YT, kod jest wydaje mi się przepisany 1:1 jak ten ktoś na YT, a mimo to u mnie nie działa. Co jest powodem?

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
     <link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet"> 
    
    <title>Naprzod ostrowy</title>
</head>

<body>
    <div id="wrapper">
        <header>
            <img id="logo" src="https://s2.fbcdn.pl/7/clubs/24547//templates/15921/img/user_top.jpg" alt="LOGO NAPRZÓD OSTROWY" />
        </header>
        
        <nav>
            <a class="menu" href="tabela.html">Tabela</a>
            <a class="menu" href="hymn.html">Hymn</a>
            <a class="menu" href="sklad.html">Skład</a>
            <a class="menu" href="kontakt.html">Kontakt</a>
        </nav>
        
        <section>
            <article>
                <h1>Naprzód to jest potęga</h1>
                <p><img class="left" src="marijuana.png" alt="pal ziolko"/></p>
                <p> sedziego i cala rodzine jego, a na drzewach zamiast lisci </p>
                <p>Literka l literka k literka s jak lks</p>
            </article>
            
        <iframe width="560" height="315" src="https://www.youtube.com/embed/TZMVsQkDs58" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            
            
        </section>
        
        <footer>
            NAPRZOD PANEM JEST I BASTA
        </footer>
    
    
    
    
    </div>
</body>
</html>

CSS:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Anton';
 }
body {
    background-color: black
}
#wrapper
    {
        max-width: 980px;
        margin: auto;
        background-color: white;
        
    }
header img 
    {
        width: 100%;
        display: block;
    }     
    
nav a
    {
        display: inline-block;
        width: 25%;
        padding: 15px 30px;
        color: black;
        text-decoration: none;
        text-align: center;
    }
a.menu:hover{background-color: yellow;}

Ktoś coś? Strona wygląda tak:

https://i.imgur.com/1KIGri2.png

A tak wygląda gdy zmienie na 24proc:

https://i.imgur.com/vLwOqme.png