Flexbox被挤出页面右侧，如何在HTML/CSS中使其置于横幅下方？

核心问题分析 #

1. Banner的float破坏文档流：.banner设置的float: left会让后续的.reasons容器脱离正常布局流，跑到Banner右侧，这是布局错位的主因。
2. Box-sizing属性无效：.banner里的box-sizing: inline-box是错误值，正确应为border-box，否则width:100%加上左右padding会让Banner宽度超出视口，引发横向滚动。
3. Flex子元素未启用Flex布局：.firstColumn这类子容器仅设置了flex-direction: column，但未添加display: flex，内部元素无法实现垂直排列。
4. Flex容器缺少边界控制：.reasons没有限制宽度和左右内边距，搭配justify-content: space-between会让子元素撑满超出视口范围。

修正后的完整代码 #

HTML（仅修正一处拼写错误）

<div class="banner">
  <p class="large">Features</p>
  <p class="below-large">What Do We Bring to the Table?</p>
</div>

<div class="reasons">
  <div class="firstColumn">
    <p class="first">No Login</p>
    <img class="firstIcon"src="lock_icon.png">
    <p class="firstDesc">No need to fear that your information will be stolen and waste time logging in when our tests are open to anyone.</p>
  </div>

  <div class="secondColumn">
    <p class="second">Accuracy</p>
    <img class="secondIcon" src="target.png">
    <p class="secondDesc">Our tests are deadly accurate and will release answers that have been meticulously chosen by our algorithims.</p>
  </div>

  <div class="thirdColumn"> <!-- 修正原拼写错误thidColumn为thirdColumn -->
    <p class="third">Ease</p>
    <img class="thirdIcon" src="smile.png">
    <p class="thirdDesc">Our tests are easy to access and easy to follow, so we can reach as many people as possible.</p>
  </div>
</div>

CSS（关键修正点已标注）

/*Banner*/
.banner{
  padding-top: 100px;
  padding-left:20px;
  padding-bottom: 100px;
  color: white;
  display:block;
  box-sizing: border-box; /* 替换无效的inline-box，确保width包含padding */
  width: 100%;
  /* 移除float: left，让容器回到正常文档流 */
  background-image: url('banner-backgrounds.png');
}
.large{
  font-size: 56px;
  font-weight: bold;
  color: white;
}
.below-large{
  font-style: italic;
  font-size: 30px;
}

/*Reasons*/
.reasons{
  padding-top: 50px; /* 把400px调整为合理间距，避免内容过于靠下 */
  padding-left: 20px;
  padding-right: 20px; /* 增加左右内边距，防止子元素贴视口边缘 */
  text-align: center;
  display: flex;
  justify-content: space-around; /* 替换space-between，让子元素分布更均匀 */
  align-items: flex-start; /* 避免子元素高度不一致时被强制拉伸 */
  width: 100%;
  box-sizing: border-box; /* 确保内边距不会让容器超宽 */
  flex-wrap: wrap; /* 可选：小屏幕自动换行，适配移动端 */
}

.firstColumn, .secondColumn, .thirdColumn{
  display: flex; /* 新增：启用flex布局，让内部元素垂直排列 */
  flex-direction: column;
  align-items: center; /* 让子元素居中对齐 */
  flex: 1; /* 让三个列平分容器宽度 */
  max-width: 300px; /* 限制每列最大宽度，防止内容过宽 */
  margin: 0 10px; /* 增加列之间的间距 */
}
.first, .second, .third{
  font-weight: bold;
  font-size: 30px;
}

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