Margin is moving the parent container and child div instead of just child div

Question

I'm trying to make a card effect on my personal website for posts I make. Right now, my cards are stacking on top of each other, but I want them come after each other like a Facebook or Instagram feed.

Here's my css:

.container {
    border-radius: 10px;
    position: relative;
    margin: 0 auto;
    background: #DCDCDC;
    height: 500px;
    width: 500px;
}
.card {
    margin: 8%;
    background: #DAA80D;
    border-radius: 10px;
    position: absolute;
    height: auto;
    width: 80%;
    box-shadow: 0 3px 5px #A0A0A0;
    text-align: justify;
    padding: 2%;
}

Here's my HTML:

<div class="container">
  <div class="card">
    Hello
  </div>
  <div class="card">
    Bye
  </div>
</div>

Here's a JSfiddle of the above code where the divs stack: https://jsfiddle.net/nbsqkrc6/

And here's a JSfiddle of code where I try to fix the margin: https://jsfiddle.net/teL7hcj8/1/

I saw an answer to a similar problem that uses top-margin: -1px, but that didn't work for my code.