How could I move the button to the right side of the navigation bar?

enter image description hereThe "Client Area" button needs to move to the right side of the navigation bar, but when I tried a few things I couldn't get it to move from the place it is in as of right now.
I tried some things but it would not work. What is a good way to resolve this issue. I couldn't a sollution to get this working.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

/* Main website */
* {
background-color: #232323;
color: white;
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Kumbh Sans', sans-serif;
}
/* Navigation bar */
/* Navigation items */
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background: #000f14;
display: flex;
align-items: center;
}
.navbar li a {
display: block;
text-align: center;
padding: 12px 16px;
text-decoration: none;
background: #000f14;
}
.navbar img {
width: 50%;
height: 50%;
}
.navbar a {
background: #000f14;
}
/* Navigation  Client area Button */
.btn {
border: 2.5px solid #053F74;
background-color: #000f14;
color: white;
padding: 12px 16px;
font-size: 16px;
cursor: pointer;
border-radius: 15px;
text-decoration: none;
}
.btn:hover {
background: #053F74;
}

<!-- language: lang-html -->

<nav class="navbar">
<div class="navbar__container">
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul>
<li>
<a href="/index.html"><img src="/images/AquaTech navbar logo.png" alt="navbar__logo"></a>
</li>
<li><a href="index.html">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="clients.html">Clients</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About us</a></li>
<a href="login.html"><button class="btn">Client Area</button></a>
</ul>
</div>
</nav>

<!-- end snippet -->

enter image description here

You can use margin-inline: auto 0 to your anchor element. Some info on how to use margins from Kevin Powell here and here.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

/* Main website */
* {
background-color: #232323;
color: white;
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Kumbh Sans', sans-serif;
}
/* Navigation bar */
/* Navigation items */
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background: #000f14;
display: flex;
align-items: center;
}
.navbar li a {
display: block;
text-align: center;
padding: 12px 16px;
text-decoration: none;
background: #000f14;
}
.navbar img {
width: 50%;
height: 50%;
}
.navbar a {
background: #000f14;
}
/* Navigation  Client area Button */
.btn {
border: 2.5px solid #053F74;
background-color: #000f14;
color: white;
padding: 12px 16px;
font-size: 16px;
cursor: pointer;
border-radius: 15px;
text-decoration: none;
}
.btn:hover {
background: #053F74;
}
/* added this class */
.align-right {
margin-inline: auto 0;
}

<!-- language: lang-html -->

<nav class="navbar">
<div class="navbar__container">
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul>
<li>
<a href="/index.html"><img src="/images/AquaTech navbar logo.png" alt="navbar__logo"></a>
</li>
<li><a href="index.html">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="clients.html">Clients</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About us</a></li>
<a class='align-right' href="login.html"><button class="btn">Client Area</button></a><!-- added the class 'align-right' to the <a> element -->
</ul>
</div>
</nav>

<!-- end snippet -->

The other way I do this sometimes is to add a dummy element as a spacer and use flex-grow to push the elements beside it to the left and right.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

/* Main website */
* {
background-color: #232323;
color: white;
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Kumbh Sans', sans-serif;
}
/* Navigation bar */
/* Navigation items */
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background: #000f14;
display: flex;
align-items: center;
}
.navbar li a {
display: block;
text-align: center;
padding: 12px 16px;
text-decoration: none;
background: #000f14;
}
.navbar img {
width: 50%;
height: 50%;
}
.navbar a {
background: #000f14;
}
/* Navigation  Client area Button */
.btn {
border: 2.5px solid #053F74;
background-color: #000f14;
color: white;
padding: 12px 16px;
font-size: 16px;
cursor: pointer;
border-radius: 15px;
text-decoration: none;
}
.btn:hover {
background: #053F74;
}
/* added this class */
.spacer {
flex-grow:2;
}

<!-- language: lang-html -->

<nav class="navbar">
<div class="navbar__container">
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul>
<li>
<a href="/index.html"><img src="/images/AquaTech navbar logo.png" alt="navbar__logo"></a>
</li>
<li><a href="index.html">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="clients.html">Clients</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About us</a></li>
<li class='spacer'></li><!-- added this spacer element  -->
<a href="login.html"><button class="btn">Client Area</button></a>
</ul>
</div>
</nav>

<!-- end snippet -->

You can create an element right before "Client area" and use margin:auto or use flex-grow: 1.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

/* Main website */
* {
background-color: #232323;
color: white;
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Kumbh Sans', sans-serif;
}
/* Navigation bar */
/* Navigation items */
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background: #000f14;
display: flex;
align-items: center;
}
.navbar ul .spacer {
flex-grow: 1;
}
.navbar li a {
display: block;
text-align: center;
padding: 12px 16px;
text-decoration: none;
background: #000f14;
}

<!-- language: lang-html -->

<nav class="navbar">
<div class="navbar__container">
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul>
<li>
<a href="/index.html"><img src="/images/AquaTech navbar logo.png" alt="navbar__logo"></a>
</li>
<li><a href="index.html">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="clients.html">Clients</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About us</a></li>
<div class="spacer"></div>
<a href="login.html"><button class="btn">Client Area</button></a>
</ul>
</div>
</nav>

<!-- end snippet -->