I have created buttons on my website, but I can't get them to line up correctly

My code is below: When you run it, the buttons go right under each other. Is there a way to make them go side-by-side with space in between them? Can someone help me do it, with like a template? And also, when a new line starts, it doesn't go off the page, and it goes under the buttons. Thank you to whoever is able to help me with this problem.

/* The secret sauce that enables gradient rotation. NOTE: does not work in all browsers. https://caniuse.com/?search=%40property */
@property --border-angle-1 {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0deg;
}

@property --border-angle-2 {
    syntax: "<angle>";
    inherits: true;
    initial-value: 90deg;
}

@property --border-angle-3 {
    syntax: "<angle>";
    inherits: true;
    initial-value: 180deg;
}


/* sRGB color. */
:root {
    --bright-blue: rgb(0, 100, 255);
    --bright-green: rgb(0, 255, 0);
    --bright-red: rgb(255, 0, 0);
    --background: black;
    --foreground: white;
    --border-size: 2px;
    --border-radius: 0.75em;
}

/* Display-P3 color, when supported. */
@supports (color: color(display-p3 1 1 1)) {
    :root {
        --bright-blue: color(display-p3 0 0.2 1);
        --bright-green: color(display-p3 0.4 1 0);
        --bright-red: color(display-p3 1 0 0);
    }
}

@keyframes rotateBackground {
    to { --border-angle-1: 360deg; }
}

@keyframes rotateBackground2 {
    to { --border-angle-2: -270deg; }
}

@keyframes rotateBackground3 {
    to { --border-angle-3: 540deg; }
}

body {
    background: var(--background);
    color: var(--foreground);
    min-height: 100dvh;
    display: grid;
    place-content: center;
    margin: 0;
    font-family: "Aspekta";
}

button {
    --border-angle-1: 0deg;
    --border-angle-2: 90deg;
    --border-angle-3: 180deg;
    color: inherit;
    font-size: calc(0.8rem + 4vmin);
    font-family: inherit;
    border: 0;
    padding: var(--border-size);
    display: flex;
    width: max-content;
    border-radius: var(--border-radius);
    background-color: transparent;
    background-image: conic-gradient(
            from var(--border-angle-1) at 10% 15%,
            transparent,
            var(--bright-blue) 10%,
            transparent 30%,
            transparent
        ),
        conic-gradient(
            from var(--border-angle-2) at 70% 60%,
            transparent,
            var(--bright-green) 10%,
            transparent 60%,
            transparent
        ),
        conic-gradient(
            from var(--border-angle-3) at 50% 20%,
            transparent,
            var(--bright-red) 10%,
            transparent 50%,
            transparent
        );
    animation: 
        rotateBackground 3s linear infinite,
        rotateBackground2 8s linear infinite,
        rotateBackground3 13s linear infinite;
}

/* Change this background to transparent to see how the gradient works */
button div {
    background: var(--background); 
    padding: 1em 1.5em;
    border-radius: calc(var(--border-radius) - var(--border-size));
    color: var(--foreground);
}

@font-face {
    font-family: "Aspekta";
    font-weight: normal;
    src: url("https://assets.codepen.io/240751/Aspekta-300.woff2") format("woff2");
}

<!DOCTYPE html>
<html>
<head>
    <title>techguyaj24's GameVerse!</title>
    <link rel="stylesheet" href="https://games.techguyaj22.rf.gd/css/style.css">
</head>
<body>
<div>
<a href="https://games.techguyaj22.rf.gd/doge-miner">
<button>
    <div>
        <img src="https://games.techguyaj22.rf.gd/img/doge-miner-cover.png">
    </div>
</button>    
</a>
</div>


<div>
<a href="https://games.techguyaj22.rf.gd/doge-miner">
<button>
    <div>
        <img src="https://games.techguyaj22.rf.gd/img/doge-miner-cover.png">
    </div>
</button>    
</a>
</div>
</body>
</html>

Solution

This is awesome effect. I placed the buttons inside a display: flex container as immediate children. This will align them. I also added gap: 20px as suggested in comments.

.d-flex {
  display: flex;
}

.gap-20 {
  gap: 20px;
}

/* The secret sauce that enables gradient rotation. NOTE: does not work in all browsers. https://caniuse.com/?search=%40property */

@property --border-angle-1 {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@property --border-angle-2 {
  syntax: "<angle>";
  inherits: true;
  initial-value: 90deg;
}

@property --border-angle-3 {
  syntax: "<angle>";
  inherits: true;
  initial-value: 180deg;
}


/* sRGB color. */

:root {
  --bright-blue: rgb(0, 100, 255);
  --bright-green: rgb(0, 255, 0);
  --bright-red: rgb(255, 0, 0);
  --background: black;
  --foreground: white;
  --border-size: 2px;
  --border-radius: 0.75em;
}


/* Display-P3 color, when supported. */

@supports (color: color(display-p3 1 1 1)) {
   :root {
    --bright-blue: color(display-p3 0 0.2 1);
    --bright-green: color(display-p3 0.4 1 0);
    --bright-red: color(display-p3 1 0 0);
  }
}

@keyframes rotateBackground {
  to {
    --border-angle-1: 360deg;
  }
}

@keyframes rotateBackground2 {
  to {
    --border-angle-2: -270deg;
  }
}

@keyframes rotateBackground3 {
  to {
    --border-angle-3: 540deg;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  min-height: 100dvh;
  display: grid;
  place-content: center;
  margin: 0;
  font-family: "Aspekta";
}

button {
  --border-angle-1: 0deg;
  --border-angle-2: 90deg;
  --border-angle-3: 180deg;
  color: inherit;
  font-size: calc(0.8rem + 4vmin);
  font-family: inherit;
  border: 0;
  padding: var(--border-size);
  display: flex;
  width: max-content;
  border-radius: var(--border-radius);
  background-color: transparent;
  background-image: conic-gradient( from var(--border-angle-1) at 10% 15%, transparent, var(--bright-blue) 10%, transparent 30%, transparent), conic-gradient( from var(--border-angle-2) at 70% 60%, transparent, var(--bright-green) 10%, transparent 60%, transparent), conic-gradient( from var(--border-angle-3) at 50% 20%, transparent, var(--bright-red) 10%, transparent 50%, transparent);
  animation: rotateBackground 3s linear infinite, rotateBackground2 8s linear infinite, rotateBackground3 13s linear infinite;
}


/* Change this background to transparent to see how the gradient works */

button div {
  background: var(--background);
  padding: 1em 1.5em;
  border-radius: calc(var(--border-radius) - var(--border-size));
  color: var(--foreground);
}

Text before container
<div class="d-flex gap-20">
  <div>
    <a href="">
      <button>
    <div>
        <img src="https://picsum.photos/100/?id=123">
    </div>
</button>
    </a>
  </div>


  <div>
    <a href="">
      <button>
    <div>
        <img src="https://picsum.photos/100/?id=1243">
    </div>
</button>
    </a>
  </div>
</div>
Text after container