边距正在移动父容器和子div，而不仅仅是子div

Question

我正在尝试在我的个人网站上发布卡片效果，以便发布我的帖子。现在，我的卡片堆叠在彼此之上，但我希望它们像Facebook或Instagram Feed一样相互追随。

这是我的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%;
}

这是我的HTML：

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

这是上面代码的JSfiddle，其中divs堆栈：https://jsfiddle.net/nbsqkrc6/

这是一个JS代码，我尝试修复边距：https://jsfiddle.net/teL7hcj8/1/

我看到了使用top-margin: -1px的类似问题的答案，但这对我的代码不起作用。