Transform problem

Edges of spans appear when a scaleX transform is applied.

by Jim Webster

HTML

<body>
  <div class="container">
    <div class="page">
      <div class="line">
        <span class="cell">A</span><span class="cell">B</span><span class="cell">C</span><span class="cell">D</span>
      </div>
    </div>
  </div>
</body>

CSS

.container {
    background-color: black;
    width: 350px;
}
.page {
   padding: 10px;
   transform: scaleX(1.2);
}
.line {
    padding-left:25px;
}
.cell {
    background-color: white;
    color: black;
    font-size: 100px;
}