コンテナのナビゲータの幅に合わせますが、コンテンツの幅を制限します。

Question

コンテナの背景イメージはナビゲータの幅に合わせる必要がありますが、コンテンツの最大幅は800pxにする必要があります。ズームアウトすると、コンテンツはナビゲータの幅に沿って醜い形で広がることはありません。

私の現在のhtmlコードでこれが可能かどうか知りたいのですが、htmlに別のタグを追加したくありません。

これは私のコードです：ここでは

.container{ 
 
    display:flex; 
 
    flex-wrap:no-wrap; 
 
    background-image: /* some huge image */ 
 
} 
 
.container div{ 
 
    flex:1; 
 
}

<div class="container"> 
 
    <div> 
 
    <h1>Section 1</h1> 
 
    <p>Some text</p> 
 
    </div> 
 
    <div> 
 
    <h1>Section 2</h1> 
 
    <p>Some text</p> 
 
    </div> 
 
    <div> 
 
    <h1>Section 3</h1> 
 
    <p>Some text</p> 
 
    </div> \t 
 
</div>

は、いくつかの化粧品

Answer 1

親のdivとCODEPENです：ナビゲーション

は、親、セット内の子のdivを作ります子の幅は800ピクセルになります。

マージンが0の子divを中央に（またはどこにでも）配置します。

子供の中に入れてください。

編集：おっと私はあなたがしたくなかったことだと思います。申し訳ありません。

Answer 2

コンテナの最大幅：800pxを設定できます。マージン：0 auto;

Answer 3

商品には2つの容器が必要です。

<div id="main-container"> 
    <div class="container"> 
    </div> 
</div> 

同様

ですから、背景を持つコンテナの幅に影響を与える項目ではなく、が含まれているmax-widthを設定することができます。

はここにあなたの更新code