网格中的边距是关闭的

Question

我正在尝试修复边距，以便我的网格的设计看起来更均匀。然而，在最后一行，具有2个元素的部分总是偏离几个像素，我无法修复它。它唯一的方法就是如果我将右下角元素的右边距设置为0.但是这会消除边距。这是codepen。

代码：

HTML

<div class="container">
  <div class="row">
    <div class="square">1x1</div>
    <div class="square">2x1</div>
    <div class="square">3x1</div>
  </div>
  <div class="row">
    <div class="square">2x1</div>
    <div class="square">2x2</div>
    <div class="square">2x3</div>
  </div>
  <div class="row">
    <div class="square2">3x1</div>
    <div class="square3">3x2</div>
  </div>
</div>

CSS

body,
.container
  position: relative
  top: 0
  left: 0
  width: 100%
  height: 100vh
.container 
  display: flex
  background-color: #afafaf
  flex-direction: column
  justify-content: space-between
.row
  background-color: #e5e5e5
  flex: auto
  display: flex
  flex-direction: row
  justify-content: center

.square
  background-color: #cacaca
  flex: 1
  display: flex
  text-align: center
  justify-content: center
  flex-flow: column wrap
  margin: 5px

.square2
  background-color: #cacaca
  flex: 2
  display: flex
  text-align: center
  justify-content: center
  flex-flow: column wrap
  margin-right: 5px
  margin-left: 5px
  margin-top: 5px
  margin-bottom: 5px
.square3
  background-color: #cacaca
  flex: 1
  display: flex
  text-align: center
  justify-content: center
  flex-flow: column wrap
  margin-top: 5px
  margin-bottom: 5px
  margin-right: 0px
  margin-left: 5px