How can i center the elements inside the box i have created?

Question

I have created this counter app and now i want to center the buttons, counter and counter number in the center of this glass box that i have created.

Edit: fixed the code, added css.

Screenshot:

body {
    text-align: center;
    background: linear-gradient(to right, #159957, #5468ff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

}

h1 {
    font-family: "JetBrains Mono",monospace;

}

h3 {
    font-family: "JetBrains Mono",monospace;
}

.container {
    width: 30rem;
    height: 20rem;
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
    border-radius: 5px;
    background-color: rgba(255, 255, 255, .15);
    margin-left: auto;
    margin-right: auto;
    backdrop-filter: blur(5px);
}

<div class="container">
    <div class="inside-box">
        <h1>Counter App</h1>
        <h3 id="count-el">0</h3>
        <button class='button-29' id="increment-btn" onclick="increment()">INCREMENT</button>
        <button class='button-29' id="decrement-btn" onclick="decrement()">DECREMENT</button>
        <button class='button-29' id="reset-btn" onclick="reset()">RESET</button>
        <script src="/index.js"></script>
    </div>
</div>

Answer 1

Try this one:

body {
  text-align: center;
  background: linear-gradient(to right, #159957, #5468ff);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}


h1 {
  font-family: "JetBrains Mono", monospace;

}

h3 {
  font-family: "JetBrains Mono", monospace;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30rem;
  height: 20rem;
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
  border-radius: 5px;
  background-color: rgba(255, 255, 255, .15);
  backdrop-filter: blur(5px);
}

<div class="container">
  <div class="inside-box">
    <h1>Counter App</h1>
    <h3 id="count-el">0</h3>
    <button class='button-29' id="increment-btn" onclick="increment()">INCREMENT</button>
    <button class='button-29' id="decrement-btn" onclick="decrement()">DECREMENT</button>
    <button class='button-29' id="reset-btn" onclick="reset()">RESET</button>
    <script src="/index.js"></script>
  </div>
</div>