ページの下部から 20 ピクセル、ページの左側から 570 ピクセルに常に配置する必要がある見出し 1 (#banner h1.index_banner_text) があります。ウィンドウのサイズが変更された場合、見出しが自然にスタックされるようにしますが、常にページの下部から 20 ピクセルのままにしたいと考えています。一番下に配置するには、コンテナ（#banner .text）に入れる必要があることは理解していますが、そのコンテナを作成するときに、幅が広すぎるという問題がある場合。私はこれを何時間もトラブルシューティングしてきました。誰かが洞察を持っていれば、それは素晴らしいことです. 現時点では、#banner .text コンテナーの幅を 40% にしています。これは、ウィンドウに巨大な水平スクロール バーが作成されないことを意味しますが、全幅ではなく、ヘッダーのスタックが短すぎるためです。
要素は、幅と高さが 100% の背景フェード バナー内にも配置されています。（問題に貢献している可能性があります）
/*banner h1 container*/
#banner .text{
position:relative;
z-index:50;
left:570px;
height:1125px;
width:40%;
}
/*banner h1*/
#banner h1.index_banner_text{
position:absolute;
bottom:20px;
font-family: 'Museo300Regular';
font-size:43.8px;
text-shadow:1px 1px 2px #000;
color:#e7e7e7;
}
/*background fading css*/
#banner{
height:100%;
width:100%;
z-index:1;
position:relative
}
#banner .wrapper .background{
position:fixed;
/*left:50%;*/
right:0;
top:0;
z-index:1;
}
#banner .wrapper{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:2;
display:none;
}
#banner .wrapper.active{
display:block;
z-index:3;
}
#banner .wrapper.fading{
z-index:4;
}