html - Need to make two buttons align a few pixels left and right of the center

Question

Need to make two buttons align a few pixels left and right of the centre I need div left to be 1px to the left of the centre. And right to be 1px right of it.

Any ideas how?

.btn {
  font-family: helvetica;
  font-weight: bolder;
  padding: 10px;
  border-radius: 2px;
  color: black;
  border: 2px solid black;
  background-color: white;
  width: 100px;
  text-decoration: none;
}

.btn2 {
  font-family: helvetica;
  font-weight: bolder;
  padding: 10px;
  border-radius: 2px;
  color: white;
  border: 2px solid white;
  background-color: black;
  width: 100px;
  text-decoration: none;
}

.divleft {
  margin: auto 0;
  text-align: left;
}

.divright {
  margin: auto 0;
  text-align: right;
}

<div class="divleft"> <a href="en.wikipedia.org/wiki/Memento_mori" class="btn">Memento</a> </div>
<div class="divright"> <a href="discord.gg/j9Bh6mSjf2" class="btn2">Mori</a> </div>

question from:https://stackoverflow.com/questions/65912252/need-to-make-two-buttons-align-a-few-pixels-left-and-right-of-the-center

Answer 1

Use flexbox:

.box {
  display: flex;
  width: 100%;
}

.left,
.right {
  width: 100%;
}

.left {
  text-align: right;
  margin-right: 10px;
}

a {
  font-family: helvetica;
  font-weight: bolder;
  padding: 10px;
  border-radius: 2px;
  border: 2px solid black;
  width: 100px;
  text-decoration: none;
}

.btn {
  color: black;
  background-color: white;
}

.btn2 {
  color: white;
  background-color: black;
}

<div class="box">
  <div class="left">
    <a href="en.wikipedia.org/wiki/Memento_mori" class="btn">Memento</a>
  </div>

  <div class="right">
    <a href="discord.gg/j9Bh6mSjf2" class="btn2">Mori</a>
  </div>
</div>