有人能教我如何修復我代碼中的這個錯誤嗎？我是個新手，似乎在網上找不到任何相關信息。我試圖把我的flexbox放在這個橫幅的正下方，但是由于一些奇怪的原因，flexbox被推到頁面的右邊，除非滾動到右邊，否則看不到。有人知道我如何把這個flexbox放在屏幕的中間和橫幅下面，因為我不知道我做錯了什么。

圖像:

頁面打開時是什么樣子

當向右滾動時

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="thidColumn">
    <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: inline-box;
  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: 400px;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.firstColumn{
  flex-direction: column;
}
.first{
  font-weight: bold;
  font-size: 30px;
}

.secondColumn{
  flex-direction: column;
}
.second{
  font-weight: bold;
  font-size: 30px;
}

.thirdColumn{
  flex-direction: column;
}
.third{
  font-weight: bold;
  font-size: 30px;
}

我在頂部應用了一些填充，如果沒有的話，它會直接出現在橫幅的右邊，不在屏幕上。感謝任何幫助。

請通過這個鏈接https://www.w3schools.com/css/ css3 _ flexbox . ASP了解你如何才能正確地實施flexbox。除此之外的圖像大小可能會導致溢出，所以請確保使用適當大小的圖像。如果你不能做到這一點，添加溢出-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>