边距为0

Question

我有边距和填充的问题。我试图将它们放在任何地方，但没有任何变化，总是存在像margin-bottom: 2px;这样的小差距。 这是一个截图： ScreenShot (from LightShot)

我的代码（全页运行）：

h1 {
  font-size: 50px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.container {
  background-color: gray;
  width: 80%;
  max-width: 90%;
  min-height: 5em;
  height: auto;
  margin: 0 auto;
  margin-top: 5em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.card {
  display: inline-block;
  margin: 0;
}

.columnl {
  float: left;
}

.columnr {
  float: right;
}

.menu {
  width: 65%;
}
.menu img {
  width: 100%;
}

.content {
  width: 35%;
  float: left;
}

<h1>Official Yazrihm's website</h1>

<div class="container">
  <div class="card">
    <div class="columnl menu">
      <img src="https://images.unsplash.com/photo-1459454783596-1f171a3afc9f?dpr=1&auto=format&fit=crop&w=1080&h=721&q=80&cs=tinysrgb&crop=">
    </div>
    <div class="columnl content">
      <h1>Lorem ipsum</h1>
      <p>consectetur adipiscing elit. Praesent vitae luctus orci. Quisque pretium, velit a iaculis egestas, ipsum sapien tristique eros, eu mollis metus nisl vitae mauris.</p>
      <p>Mauris et condimentum est, vel commodo eros. Cras finibus eget arcu sit amet dictum. Quisque condimentum turpis pharetra consequat aliquet.</p>
    </div>
  </div>

  <div class="card">
    <div class="columnr content">
      <h1>Nullam elementum</h1>
      <p>Vivamus congue euismod velit, ac pretium neque. Proin rutrum vitae turpis id placerat. Integer semper quam id auctor fermentum.</p>
      <p>Nulla ut lectus ex. Curabitur in neque placerat, condimentum magna vel, malesuada risus. Integer sem quam, lobortis quis varius vitae, tempor vel risus.</p>
    </div>
    <div class="columnr menu">
      <img src="https://images.unsplash.com/photo-1496171367470-9ed9a91ea931?dpr=1&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=">
    </div>
  </div>
</div>

我还有reset css file from eric meyer

谢谢，你可以自由地用英语翻译。 Yazrihm。