Css 使两个div彼此对齐，且仅在响应模式下它们之间留有边距

我有一些div，我想在小分辨率的手机和2乘2下彼此对齐，在更大分辨率的平板电脑和桌面上彼此对齐

它们是这样生成的：

<div id="container">

<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

</div>

这是我离得有多近的一张小提琴图：

在mobileview中，一切正常。但当我将窗口增加到767像素以上时，它们几乎可以正确显示。问题是我无法让利润发挥作用

---

我需要它们的左右两边没有边距，中间有10px的余量。如何实现这一点？

更有效的方法是使用grid或flexbox

网格

* { 框大小：边框框； } 容器{ 利润率：0.20px； 背景色：ececec； 显示：网格； 栅极间隙：15px； } .卡片{ 位置：相对位置； 背景色：ffffff； 高度：100px； 边框：1px实心C4； } @媒体屏幕和最小宽度：767px{ 容器{ 网格模板柱：1fr 1fr； } }

---

非常感谢您的详细回复和解释。我会同意你的flexbox建议并清理代码。谢谢

#container{
  margin: 0 20px;
  background-color:#ececec;
}
.card{
  display: block;
  position: relative;
  margin-bottom: 15px;
  background-color:#ffffff;
  height:100px;
  border:1px solid #c4c4c4;
}

@media screen and (min-width: 767px) {

    .card{
    display: inline-block;
    position: relative;
    margin-bottom: 15px;
    background-color:#ffffff;
    height:100px;
    width: calc(50% - 20px);
    margin:5px;
    border:1px solid #c4c4c4;
  }

}

}