请通过此链接https://www.w3schools.com/css/css3_flexbox.asp了解如何正确实现flexbox。除此之外，图像大小可能会导致溢出，因此请确保使用适当大小的图像。如果您无法做到这一点，请将overflow-x:hidden;添加到映像的父容器中。
希望有帮助！谢谢

我编辑了你的代码，并注解了错误：

• 注：我删除了src属性的图像演示的目的

/*Banner*/
.banner{
  padding-top: 100px;
  padding-left:20px;
  padding-bottom: 100px;
  color: white;
  display:block;
  box-sizing: inline-box;
  /*float:left; deleted, causing the banner to be to the left of the flex box  */ 
  /*width: 100%;  replaced with width:auto, to not cause overflow */
  width:auto; /*added*/
  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: 400px; optionally deleted, why so much padding? */
  text-align: center;
  display: flex;
  flex-direction:raw; /* this is the default value of flex-direction */
  justify-content: space-between;
  align-items: center;
  flex-wrap:wrap; /*added for a responsive layout the column will jump to the next line when the screen is smaller */
 }
 
.reasons>*{ /*added to control flex children size*/
  width:30%; /* 30% 30% 30%  + 10% space */
  min-width:200px; /* choose your min-width for the children */
}

.firstColumn{
  /* flex-direction: column;  deleted, flex-direction is for the parent flex-box*/
}
.first{
  font-weight: bold;
  font-size: 30px;
}

.secondColumn{
    /* flex-direction: column;  deleted, flex-direction is for the parent flex-box */
}
.second{
  font-weight: bold;
  font-size: 30px;
}

.thirdColumn{
   /* flex-direction: column;  deleted, flex-direction is for the parent flex-box */
}
.third{
  font-weight: bold;
  font-size: 30px;
}

<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" alt="img">
    <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"  alt="img">
    <p class="secondDesc">Our tests are deadly accurate and will release answers that have been meticulously chosen by our algorithims.</p>
    </div>
    
    <div class="thidColumn">
    <p class="third">Ease</p>
    <img class="thirdIcon" alt="img">
    <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>

Kevin Powell关于flex-box的推荐视频：https://www.youtube.com/watch?v=u044iM9xsWU
如果你有任何问题，请随时发表评论