Margin property doesn't work?

I got the data from an API and after it I wanted to display buttons, but buttons are stuck in the middle of displayed API data and I have no idea why…

This is my HTML:

<section id="output"></section>
    <section class="buttons">
      <button class="button">Previous</button>
      <button class="button">1</button>
      <button class="button">Next</button>
    </section>

Section with an id of output is data from the API…
and this is my CSS:

#output {
  margin-top: 5%;
  display: grid;
  grid-template-columns: 45% 45%;
  column-gap: 5%;
  row-gap: 1%;
  justify-items: center;
  align-items: center;
}

section .buttons {
  display: flex;
  justify-content: center;
  margin-top: 5%;
}

.button {
  outline: none;
  background-color: #ed1d24;
  color: white;
  font-size: 25px;
  border: none;
  border: 2px solid rgba(237, 29, 36, 0.75);
  border-radius: 10px;
  padding: 5px 10px;
  margin: 1%;
}

And this is what I get:

Even if I change margin-top to 500%, it is still the same. Buttons are not even centered and they were centered before I added the .js file and before the output was displayed. Any insight please?

It would be easier to figure out if you had it online so we could fiddle with it. Maybe put it on CodePen or something like that?

Just a guess, the stuff you’re generating in #output isn’t being contained properly. You might try a min-height for the output or play around with the overflow property.