响应式网页屏幕宽度≤500px时右侧出现多余空白无法消除

页面在宽度≤500px时出现右侧空白，是以下几个溢出问题共同导致的：

• 项目容器.flex-container设置了固定宽度1100px，当屏幕宽度小于1100px时，容器宽度超出视口，直接触发横向溢出
• 项目卡片图片.img设置了固定宽度450px，搭配项目卡片左右各30px的margin，总宽度达到510px，超出500px的视口限制
• 未设置全局横向溢出兜底，任意元素超出视口都会直接导致页面出现横向滚动条和右侧空白

你可以直接替换原有CSS中对应的规则，或新增以下代码：

1. 全局横向溢出兜底

body {
  overflow-x: hidden;
  width: 100%;
}

2. 替换原.flex-container规则，取消固定宽度改为自适应

.flex-container {
  max-width: 1100px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 15px; /* 小屏状态下避免元素贴边，优化视觉效果 */
}

3. 替换原.img规则，让图片自适应容器宽度

.img {
  max-width: 100%;
  width: 450px;
  height: auto;
  aspect-ratio: 3/2; /* 保留原有的宽高比例 */
  object-fit: cover;
}

4. 小屏状态下微调项目卡片边距（可选，优化展示效果）
   将以下代码添加到max-width:500px的媒体查询块中

.project-tile {
  margin: 0 0 30px 0;
}

• 现有HTML中存在多个重复id的问题（如多个元素共用id="work"、id="item"），id属性为页面唯一值，建议将重复id改为class，同步修改CSS中对应的选择器即可，避免后续锚点跳转、JS选择元素出现异常
• 现有媒体查询中存在#title { padding: ; }的空规则，建议删除避免CSS解析异常
• #icon的动画规则中使用了top属性，但未给元素设置position: relative，动画不会生效，可给#icon添加position: relative属性修复动画效果

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