Untitled

<!DOCTYPE html>
<html>
<head>
    <style>
        * {
            padding:0;
            margin:0;
            background:#2c2c2f;
            outline:  1px solid red;
        }
        main {
            margin-top: 40px;
        }
        main article {
            display:flex;
            margin-top: 20px;
            width:100vw;
            height:100px;
        }
        main .center{
            display: flex;
        }
        header h1{
            font-size: 3em;
            align-content: center;
            color:white;
        }
        header .center{
            align-items: center;
            height: 100%;
        }
        nav button {
            font-size: 1.3em;
            display:flex;
            justify-content: center;
            align-content: center;
            flex-direction: column;
            cursor: pointer;
            height:20px;
            color:white;
            opacity:0.5;
        }
    </style>
</head>
    <body>
        <header>
        <h1>Yeeters</h1>
        <div class="center">
            <nav>
            <button>yeet</button>
            <button>yeet</button>
            <button>yeet</button>
            <button>yeet</button>
            <button>yeet</button>
            </nav>
        </div>
        </header>
        <main>
            <div class="center">
        <article>
            hi
        </article>
        <article>
            hello
        </article>
        <article>
            yes
        </article>
        <article>
            big
        </article>
            </div>
        </main>
    </body>
</html>