How do I space multiple buttons in HTML?

Question

<a href="https://github.com/drippy-cat" class="button primary">GitHub</a>
<a href="https://discord.gg/xvTyBgn6F2" class="button primary">Discord</a>
<a href="https://app.daily.dev/drippy-cat" class="button primary">daily.dev</a>

I have been working on my website. This code is located in index.html of this repository. I have been trying to create under the "social" tab of the page. However, it ends up looking like the screenshot I attached. Is there a way to space out the buttons more and have them in a grid pattern? Thanks!

Answer 1

A quick solution is to add a wrapper and specify the margin of the buttons.

<div class="button-container">
  <a href="https://github.com/drippy-cat" class="button primary">GitHub</a>
  <a href="https://discord.gg/xvTyBgn6F2" class="button primary">Discord</a>
  <a href="https://app.daily.dev/drippy-cat" class="button primary">daily.dev</a>
</div>
<style>
  .button-container {
    display: flex;
  }

  .button-container a.button {
    margin-right: 15px;
  }
</style>