Html 响应时两个引导行未正确对齐

所以我正在开发这个网站，客户想要蜂巢图案，如图所示：

在常规模式下，它看起来就像我想要的那样，但在响应模式下，第二组是向右偏移的，而不是六边形整齐地相互重叠。我不知道为什么。我相信这很简单，但我想不出来

代码如下：

.icon-row-1{
位置：相对位置；
明确：两者皆有；
边际上限：0px；
右边距：自动；
左边距：自动；
页边距底部：0；
宽度：90%；
}
.icon-row-2{
浮动：无；
位置：相对位置；
明确：两者皆有；
右边距：自动；
左边距：自动；
页边距底部：0；
宽度：60%；
}

比赛

img{最大宽度：100%；高度：自动；}
.icon-row-1{
位置：相对位置；
明确：两者皆有；
边际上限：0px；
右边距：自动；
左边距：自动；
页边距底部：0；
宽度：90%；
}
.icon-row-2{
浮动：无；
位置：相对位置；
明确：两者皆有；
右边距：自动；
左边距：自动；
页边距底部：0；
宽度：60%；
}

比赛

添加此CSS

img {
height: auto;
max-width: 100%;
}

查看
添加以下css：

img {
 height: auto;
 max-width: 100%;

---

}

在问题中添加您的html代码谢谢！图像现在可以正确叠加，但我们产生了一个新问题。由于某种原因，第二组图像比第一组图像小。