为什么小屏幕下我的heading元素重叠？前端布局适配问题求助

你当前的代码没有做响应式适配，固定像素尺寸、flex容器无换行规则、固定边距是窗口缩小后布局错乱的核心原因，按以下规则修改即可：

• 给flex容器增加换行规则，避免子元素挤压重叠
• 将固定像素的边距、字号、高度改为响应式取值，适配不同视口宽度
• 避免给内容容器设置固定高度，改用最小高度防止内容溢出

需要修改的CSS代码片段 #

/* 导航栏加换行 */
#navbar {
  display: flex;
  align-items: center;
  position: relative;
  top: 0;
  flex-wrap: wrap; /* 新增 */
  justify-content: center; /* 小屏换行后居中，可按需保留 */
}

/* 导航菜单加换行和边距适配 */
#navbar ul {
  display: flex;
  font-size: 1.3rem;
  flex-wrap: wrap; /* 新增 */
  margin-bottom: 10px; /* 新增，换行后和下方内容留间距 */
}

/* home区块适配 */
#home {
  display: flex;
  flex-direction: column;
  padding: 3px 5vw; /* 修改，替换原来的3px 200px */
  min-height: 278px; /* 修改，替换原来的height:278px */
  justify-content: center;
  align-items: center;
  font-family: 'Lobster', cursive;
}

/* home背景适配 */
#home::before {
  content: "";
  background: url('../bg1.jpg') no-repeat center center/cover;
  position: absolute;
  min-height: 400px; /* 修改，替换原来的height:56% */
  width: 100%;
  z-index: -1;
  opacity: 0.89;
  top: 0px;
  left: 0px;
}

/* 标题响应式字号 */
.h-primary {
  font-size: clamp(2rem, 5vw, 3.8rem); /* 修改，替换原来的3.8rem */
  padding: 12px;
  font-family: 'Varela Round', sans-serif;
}
.h-secondary {
  font-size: clamp(1.5rem, 3vw, 2.2rem); /* 修改，替换原来的2.2rem */
  padding: 12px;
  font-family: 'Varela Round', sans-serif;
}

/* 服务区块flex加换行 */
#services {
  margin: 110px 0;
  margin-left: 20px;
  margin-right: 20px;
  display: flex;
  flex-wrap: wrap; /* 新增 */
  gap: 12px; /* 新增，控制子元素间距更稳定 */
}

/* 服务卡片响应式宽度 */
#services .box {
  border: 2px solid brown;
  padding: 20px;
  border-radius: 20px;
  background-color: rgb(236, 229, 229);
  flex: 1 1 300px; /* 新增，最小宽度300px，多余空间自动拉伸 */
}

/* 服务卡片图片自适应 */
#services .box img {
  display: block;
  max-height: 171px; /* 修改，替换原来的height:171px */
  width: auto;
  margin: auto;
}

修改完后窗口缩小的时候，导航会自动换行、服务卡片会自动从一行3个变成一行2个再变成一行1个，所有元素不会重叠、内容也不会溢出。

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