Html 翻转卡片，中间有1px边框

我试着把翻盖卡片放在彼此旁边，中间有一个1px的边框。翻转卡应包装成其他行。渲染引擎中似乎存在一些不对齐，有时会导致背景溢出。请参见此处边框和翻页卡内容之间的随机红线：。有什么克服这个问题的建议吗

我的代码是：

。翻转卡片行{
显示器：flex；
柔性包装：包装
}
.翻转卡片{
背景色：红色；
位置：相对位置；
弹性：0.33.3333%；
最大宽度：33.3333%
}
@介质（最小宽度：800px）{
.翻转卡片{
弹性：0.16.666.7%；
最大宽度：16.666 7%
}
}
.翻转卡片边框{
边框底部：1px实心#c7c9c8；
右边框：1px实心#c7c9c8
}
@介质（最大宽度：800px）{
.翻转卡列边框：第n个子项（-n+3）{
边框顶部：1px实心#c7c9c8
}
.翻转卡列边框：第n个子项（3n+1）{
左边框：1px实心#c7c9c8
}
}
@介质（最小宽度：800px）{
.翻转卡列边框：第n个子项（-n+6）{
边框顶部：1px实心#c7c9c8
}
.翻页卡列边框：第n个子项（6n+1）{
左边框：1px实心#c7c9c8
}
}
.广场{
填充顶部：100%
}
.小组{
背景色：#c7c9c8；
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：100%；
-webkit透视图：600px；
透视图：600px
}
.panel.前面，.panel.后面{
位置：绝对位置；
宽度：继承；
身高：继承；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
-webkit变换样式：保留-3d；
变换样式：保留-3d；
-webkit过渡：所有0.4s易用性；
-o型过渡：所有0.4s易于进入；
过渡：所有0.4s都可以轻松进入
}
.面板.背面{
-webkit变换：旋转（-180度）；
变换：旋转（-180度）
}
.面板：悬停。前{
-webkit变换：旋转（180度）；
变换：旋转（180度）
}
.面板：悬停。返回{
-webkit变换：rotateY（0）；
变换：旋转（0）
}
.bg浅蓝色{
背景：#72899b
}
.bg白色{
背景：#fff
}