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

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  align='center'>
    <a href="#">Home</a>
    <a href="#">Works</a>
    <a href="#">About</a>
    <a href="#">Projects</a>

    <button class='chat'>Let's chat</button>
  </div>
</nav>

CodePudding user response：

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  align='center'>
    <div >
      <a href="#">Home</a>
      <a href="#">Works</a>
      <a href="#">About</a>
      <a href="#">Projects</a>
    </div>

    <button class='chat'>Let's chat</button>
  </div>
</nav>

CodePudding user response：

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  align='center'>
    <a href="#">Home</a>
    <a href="#">Works</a>
    <a href="#">About</a>
    <a href="#">Projects</a>
</div>
    <button class='chat'>Let's chat</button>
  
</nav>