JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portofolio</title>
    <link type="text/css" rel="stylesheet" href="style.css" >
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap" rel="stylesheet">
</head>
<body style="background-color: #ffe8d6;">
    <div class="container">
        <div class="menu-container">
            <div class="Menu">
                <div class="site-title"><h2>Portofolio</h2></div>
                <div class="nav-items">
                    <div>First Year</div>
                    <div>Second Year</div>
                    <div>Contact</div>
                    <div>More</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS

.container{
    width: 100%;
    display: inline-flex;
    justify-content: center;
}

.menu-container{
    height: 100%;
    width: 80%;
    display: inline-flex;
    justify-content: center;
    margin: 0px;
    padding: 0px;
}

.Menu{
    width: 75%;
    display: inline-flex;
    justify-content: space-between;
    font-family: Montserrat;
    background-color: rgba(82, 121, 111, 0.5);
}

.site-title{
    padding-left: 15px;
    cursor: pointer;
}

.nav-items{
    padding: 0;
    margin-top: 5px;
    display: flex;
    font-size: 1.2rem;
}

.nav-items > *{
    padding: 0px;
    font-weight: 600;
    color: rgba(38, 70, 83, 1);
    margin: 15px;
}

.nav-items >*:hover{
    color: white;
    cursor: pointer;
}

@media (max-width: 685px){
    .container{
        display: inline-flex;
        height: fit-content;
        width: 30%;
        flex-direction: column;
        font-size: 0.8rem;
    }

    .Menu{
        border-radius: 2%;
        display: inline-flex;
        flex-direction: column;
    }

    .site-title{
        text-align: center;
        padding: 0;
    }

    .nav-items{
        text-align: center;
        margin: 5px 2px 5px 2px;
        display: inline-flex;
        flex-direction: column;
    }
}