求助：复刻页面Hero区域无媒体查询但响应式失效，云元素异常

问题概述 #

用HTML/CSS复刻页面Hero区域时，遇到两个问题：

• 小屏幕下页面右侧出现空白（横向滚动条）
• 云元素位置异常，无法像原页面那样在达到特定宽度后停止偏移

问题根源 #

1. 云的固定像素定位：给.top-cloud和.bottom-cloud设置了right:300px、left:250px这类固定像素值，当屏幕宽度小于该值时，云会超出容器范围，触发横向滚动，导致右侧空白。
2. 无效的CSS选择器：section.head-body img > h1,h2这个选择器逻辑错误，无法正确选中h1/h2元素，导致样式不生效。
3. 原页面未用媒体查询实现响应式的核心是使用相对单位（百分比）定位+容器最大宽度限制，而非固定像素。

修复步骤 #

1. 消除右侧空白 #

给.head-body添加横向溢出隐藏，防止内容超出容器时出现滚动条：

.head-body{
    background-color:#e4f9f5;
    position: relative;
    padding-top: 100px;
    text-align: center;
    overflow-x: hidden; /* 新增：隐藏横向溢出内容 */
}

2. 实现云的响应式定位 #

把固定像素定位改为百分比单位，让云随容器宽度自动调整位置：

.top-cloud{
    position: absolute;
    right: 10%; /* 替换原固定值300px */
    top: 40px;
}
.bottom-cloud{
    position: absolute;
    left: 10%; /* 替换原固定值250px */
    bottom: 300px;
}

如果要和原页面一致，让云在屏幕宽于特定值（比如1200px）时不再偏移，可结合max-width和calc：

.head-body{
    background-color:#e4f9f5;
    position: relative;
    padding-top: 100px;
    text-align: center;
    overflow-x: hidden;
    max-width: 1200px; /* 设置容器最大宽度 */
    margin: 0 auto; /* 容器居中 */
}

.top-cloud{
    position: absolute;
    /* 屏幕宽于1200px时用10%偏移；窄于时保持相对容器右侧的位置 */
    right: calc(10% - (1200px - 100vw)/2);
    top: 40px;
}
.bottom-cloud{
    position: absolute;
    left: calc(10% - (1200px - 100vw)/2);
    bottom: 300px;
}

3. 修正无效CSS选择器 #

原选择器section.head-body img > h1,h2无法正确选中元素，替换为单独的h2样式：

.head-body h2{
    font-family: "Montserrat", sans-serif;
    font-size: 2.5rem;
    color: #66bfbf;
    font-weight: bold;
    padding-bottom: 20px;
    text-align: center;
}

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