CSS布局：底部区域logo居中、图片对齐与边距问题修复

核心问题1：.bottom绿色区域元素对齐错乱修复 #

• 首先给.bottom容器添加Flex布局基础规则，直接实现logo、截图、文本的自动对齐，不需要手动加偏移margin：

.bottom {
  display: flex;
  align-items: center; /* 所有子元素垂直方向居中对齐，解决logo和截图高低错位问题 */
  justify-content: center; /* 整体内容在容器内水平居中 */
  gap: 48px; /* 控制logo和截图组之间的水平间距，可根据设计稿调整数值 */
}

• 包裹多张应用截图的父容器补充Flex规则，处理截图之间的排列：

.screenshot-wrap {
  display: flex;
  align-items: center;
  gap: 16px; /* 控制相邻截图的间距 */
}

核心问题2：h3标题贴顶、加边距样式溢出修复 #

• 样式溢出的根本原因是容器默认使用content-box盒模型，内边距、边距会被算在容器宽高之外，同时子元素顶部margin会触发外边距折叠，把内容顶出容器边界。先给.bottom加盒模型规则和内边距，从根源解决问题：

.bottom {
  /* 追加到之前的.bottom样式里 */
  box-sizing: border-box;
  padding: 32px 24px; /* 第一个值就是容器顶部内边距，直接拉开h3和区域顶部的距离，不会触发溢出 */
}

• 标题本身的默认边距重置，避免额外错位：

.bottom h3 {
  margin: 0; /* 清除浏览器默认的h3上下margin */
  margin-right: 24px; /* 如果需要拉开标题和旁边logo/截图的间距，只加水平方向margin即可 */
}

避坑提示：不要给h3加margin-top调整顶部间距，这类上下margin很容易触发外边距折叠，导致布局溢出，容器级的内边距是更稳定的方案。

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