CSS flex布局：无法消除行内flex容器两个项目之间的水平间距

问题原因 #

你设置的全局img样式携带了超大右外边距，且没有被剪贴画的专属样式覆盖，导致图片和右侧说明之间出现无法消除的固定间距：

img {
  /* 这里的600px右外边距作用到了所有图片，包括section里的剪贴画 */
  margin: 0px 600px 0px 0px;
}

同时你使用了非标准的<div2>标签，可能导致浏览器解析样式异常。

修复方案 #

1. 修改#clip的CSS规则，覆盖全局img的外边距设置：

#clip {
  width: 100px;
  height: 100px;
  margin-right: 0; /* 清除全局设置的600px右外边距 */
  /* 如果需要图片和文本之间留小间距，可以改成margin-right: 20px，自行调整数值即可 */
}

2. 将HTML里的非标准标签<div2 id="features">改为标准的<div id="features">，对应的闭合标签也同步改成</div>。

额外优化建议 #

• 全局img的600px右外边距是为header区域的logo设置的，建议给logo加专属类名单独设置样式，不要用全局标签选择器，避免影响页面其他位置的图片。
• section的flex布局默认就是横向排列，不需要额外写flex-direction: row，可以省略。

内容的提问来源于stack exchange，提问作者Viny Selopal