CSS/HTMLでボックスの上にヘッダーを置く

Question

大きな灰色のコンテナの上に「なぜ私たちから購入するべきか」を入れたいが、テキストをコンテナの中央に置いたときのようにする方法を知らないすべて下に移動するとテキストが重なり合わないようになりますが、誰かがこれに対する修正を知っていますか？

#whybuy { 
 
    color: #ffcc00; 
 
    font-size: 40px; 
 
    margin: 0 auto; 
 
    margin-top: 200px; 
 
    text-align: center; 
 
} 
 

 
#largebox { 
 
    width: 1890px; 
 
    height: 475px; 
 
    background-color: #2c2c2c; 
 
    padding-top: 100px; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
    margin: 0 auto; 
 
    margin-top: 200px; 
 
} 
 

 
#box1 { 
 
    height: 450px; 
 
    width: 300px; 
 
    background-color: #232323; 
 
    float: left; 
 
    margin-left: 425px; 
 
} 
 

 
#box2 { 
 
    height: 450px; 
 
    width: 300px; 
 
    background-color: #232323; 
 
    float: left; 
 
    margin-left: 325px; 
 
} 
 

 
#box3 { 
 
    height: 450px; 
 
    width: 300px; 
 
    background-color: #232323; 
 
    float: left; 
 
    margin-left: 325px; 
 
}

<h1 id="whybuy">WHY BUY FROM US</h1> 
 
<div id="largebox"> 
 
    <div id="box1"> 
 
    <div id="box2"> 
 
     <div id="box3"> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

これはlargebox上のテキストを配置します。

#whybuy { 
color: #ffcc00; 
font-size: 40px; 
position: absolute; 
width: 100% 
text-align: center; 
z-index: 1; 

#largebox { 
    width: 1890px; 
    height: 475px; 
    background-color: #2c2c2c; 
    padding-top: 100px; 
    padding-left: 20px; 
    padding-right: 20px; 
    margin: 0 auto; 
    display: relative 
} 

#box1 { 
    height: 450px; 
    width: 300px; 
    background-color: #232323; 
    float: left; 
    margin-left: 425px; 
} 

#box2 { 
    height: 450px; 
    width: 300px; 
    background-color: #232323; 
    float: left; 
    margin-left: 325px; 
} 

#box3 { 
    height: 450px; 
    width: 300px; 
    background-color: #232323; 
    float: left; 
    margin-left: 325px; 
} 

Answer 2

#largeboxの余白を確認してください。それはmargin-top：200px;

#largebox { 
width: 1890px; 
height: 475px; 
background-color: #2c2c2c; 
padding-top: 100px; 
padding-left: 20px; 
padding-right: 20px; 
margin: 0 auto; 
//margin-top: 200px; 
}