疑问：个人作品集网站图片右侧78.500 margin来源排查

核心问题1：类名不匹配 #

你HTML里的容器类是main__image--container，但CSS里写的选择器是.main__img--container，拼写不一致导致容器样式完全没生效！部分浏览器会给figure标签添加默认左右margin，这大概率是右侧78.5px空白的来源。

核心问题2：不合理的display设置 #

#main__img设置了display: flex，img属于替换元素，没必要设为flex容器，这会干扰它的正常布局逻辑。

具体修改方案 #

步骤1：统一类名

二选一即可：

• 把HTML里的figure类改为main__img--container，和CSS选择器匹配
• 把CSS里的选择器改为.main__image--container，和HTML类名匹配

步骤2：调整布局让图片靠近右侧

如果想让图片整体靠右，修改容器CSS：

.main__image--container {
  box-sizing: border-box;
  margin: 0;
  /* 让容器在父元素内靠右对齐 */
  margin-left: auto;
  padding: 0;
  /* 标题要跟着靠右就设right，想居中就保留center */
  text-align: right;
}

如果想让标题居中、图片单独靠右，容器保留text-align: center，给图片添加自动左margin：

#main__img {
  height: 80%;
  width: 80%;
  /* 替换flex为合理的block */
  display: block;
  clip-path: circle();
  /* 让图片在容器内靠右 */
  margin-left: auto;
}

步骤3：清理无效设置

删掉#main__img里的display: flex，避免布局异常。

验证方法 #

修改后打开浏览器开发者工具（F12），选中figure容器和img元素，查看Computed面板的margin/padding，确认右侧空白是否消失。如果还有问题，检查父元素是否存在padding/margin，或是有其他CSS规则干扰布局。

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