html - How do I align these HREF Buttons?

Question

I am trying to make 2 button align (they are HREFs) on the right side of a div. I have tried many stuff but I am not sure how.

CSS:

.href-right-header-buttons {
    position: unset;
    color: #fff;
    font-size: 26px;
    letter-spacing: 2px;
    padding-top: 34px;
    padding-bottom: 34px;
    padding-left: 6px;
    padding-right: 6px;
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    right: 0;
    top: 0;
    animation: animheader;
    animation-duration: 1.5s;

.div-header-gradient {
    display: flex;
    background: linear-gradient(#7700ff, #953bff);
    height: 100px;
    width: 100%;
    margin-left: 0px;
    overflow: hidden;
    animation: animheader;
    animation-duration: 1.5s;
    flex-direction: row;
}

HTML:

    <div class="div-header-gradient" style="z-index: 1000;">
        <p class="text-header-title-white" style="z-index: 1000;">
            Axxon
        </p>
        <a href="https://discord.com/oauth2/authorize?client_id=796339788235800577&scope=bot&permissions=267906127" class="href-right-header-buttons">
            Invite Bot
        </a>

        <a href="#" class="href-right-header-buttons">
            More Information
        </a>
    </div>

How this looks now:

How I want it to look:

So basically, I want it to move them both to the right side of the div and make them seperated.

question from:https://stackoverflow.com/questions/65648943/how-do-i-align-these-href-buttons

Answer 1

.href-right-header-buttons {
  position: unset;
  color: #fff;
  font-size: 26px;
  letter-spacing: 2px;
  padding-top: 34px;
  padding-bottom: 34px;
  padding-left: 6px;
  padding-right: 6px;
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
  right: 0;
  top: 0;
  animation: animheader;
  animation-duration: 1.5s;
}

.div-header-gradient {
  display: flex;
  background: linear-gradient(#7700ff, #953bff);
  height: 100px;
  width: 100%;
  margin-left: 0px;
  overflow: hidden;
  animation: animheader;
  animation-duration: 1.5s;
  flex-direction: row;
  justify-content: space-between;
}

<div class="div-header-gradient" style="z-index: 1000;">
  <p class="text-header-title-white" style="z-index: 1000;">
    Axxon
  </p>
  <span class="left">
        <a href="https://discord.com/oauth2/authorize?client_id=796339788235800577&scope=bot&permissions=267906127" class="href-right-header-buttons">
            Invite Bot
        </a>

        <a href="#" class="href-right-header-buttons">
            More Information
        </a>
    </span>
</div>