How can I keep my navbar from going onto multiple lines VANILLA

My websites navbar formatting is messed up whenever I scroll my window, Its really annoying and I have tried using different unit scales like percentages, etc.. but none of the stuff I am seing online is working, I would like to keep the same sort of style but have it fit on one line for smaller resolutions without having to change how it looks for larger resolutions (such as pc). thanks.

Fullscreen: fullscreen picture

Smaller resolution: smaller resolution picture

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../public/stylesheets/home.css">
    <title>Mackseco - A Fun Economy and Trading Website</title>
</head>
<body>
    <div class="navbar">
        <li id="titleNAVl"><a href="/" id="titleNAV">Mackseco</a></li>
        <li id="faqNAVl"><a href="/faq" id="faqNAV">FAQ</a></li>
        <li id="discordNAVl"><a href="/help" id="discordNAV">Discord</a></li>
        <li id="loginNAVl"><a href="/login" id="loginNAV" style="color:#EDEDED;">Login</a></li>
    </div>
    <div class="main">
        
    </div>

    <script src="../public/javascripts/home.js"></script>
</body>
</html>

CSS:

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


body
{
    background-color: #EDEDED;
    font-family: 'Ubuntu', sans-serif;
}


.navbar
{
    padding:0;
    width:100%;
    margin:0;
    position:fixed;
    top:0;
}
.main
{
    margin-top:30px;
}


#titleNAVl, #faqNAVl, #discordNAVl, #loginNAVl
{
    display:inline-block;
}
#titleNAV, #faqNAV, #discordNAV, #loginNAV
{
    text-decoration: none;
    color:#DA0037;
}
#faqNAV:hover, #discordNAV:hover
{
    text-decoration:underline;
}

#titleNAVl
{
    margin:2% 45% 0 15%;
    font-size: 2em;
}
#faqNAVl
{
    margin-right:0.8%;
}
#discordNAVl
{
    margin-right:0.8%;
}
#loginNAVl
{
    background-color: #DA0037;
    padding: 0.55em 1.25em 0.55em 1.25em;
    border-radius:0.55em;
}