How to not push other elements away when increasing margin on the same line - html

Question

How to not push other elements away when increasing margin on the same line. I have <a> elements and a button element. When I try to increase the left-margin of button, the <a> margin gets pushed away. I just want the button to go to the right of the page. Tried using float but I don't want it to go to the extreme left (leave some space).
a {
font-family: Arial;
font-size: 12px;
align-items: center;
margin-right: 50px;
color: black;
text-decoration: none;
}
nav {
margin-top: 30px;
}
.chat {
width: 100px;
height: 35px;
background-color: white;
border-style: solid;
border-color: black;
border-width: 1px;
font-family: Arial;
font-weight: 600;
cursor: pointer;
margin-left: 0px;
}
<nav>
<div class="navbar" align='center'>
Home
Works
About
Projects
<button class='chat'>Let's chat</button>
</div>
</nav>

Answer 1

I just want the button to go to the right of the page.
Use flex-box. Wrap your links inside a container and set display of it's parent element to flex and remove the width property of the button.
a {
font-family: Arial;
font-size: 12px;
align-items: center;
margin-right: 50px;
color: black;
text-decoration: none;
}
nav {
margin-top: 30px;
}
.chat {
height: 35px;
background-color: white;
border-style: solid;
border-color: black;
border-width: 1px;
font-family: Arial;
font-weight: 600;
cursor: pointer;
}
.navbar {
display: flex;
justify-content: space-around;
align-items: center;
}
<nav>
<div class="navbar" align='center'>
<div class="links">
Home
Works
About
Projects
</div>
<button class='chat'>Let's chat</button>
</div>
</nav>

Answer 2

If you want to use float you need to set a width on nav and then float button right and navbar float left.
a {
font-family: Arial;
font-size: 12px;
align-items: center;
margin-right: 50px;
color: black;
text-decoration: none;
}
nav {
margin-top: 30px;
width: 600px;
}
.navbar{
float:left;
}
.chat {
width: 100px;
height: 35px;
background-color: white;
border-style: solid;
border-color: black;
border-width: 1px;
font-family: Arial;
font-weight: 600;
cursor: pointer;
margin-left: 0px;
float:right;
}
<nav>
<div class="navbar" align='center'>
Home
Works
About
Projects
</div>
<button class='chat'>Let's chat</button>
</nav>