コンテナを超えて要素を拡張しますが、コンテナ内に子を保持します

Question

私は最近、親コンテナ内にすべてのコンテンツを保持したいという問題がありましたが、ナビゲーションの背景をページの幅の100％ 。私が試した方法は、ナビゲーションをページの100％の幅にするという面で効果がありましたが、今ではul内部はコンテナの影響を受けません。これは当初のものです。

ナビゲーション内で別のコンテナdivを使用して作業するようにしましたが、これは非常に便利な方法です。

親コンテナをnav内のulにどのように影響させるかについての提案はありますか？

HTML：

<div class="container"> 
    <nav class="menu"> 
    <div class="container"> 
    <ul> 
     <li><a href="#view1">HOME</a></li> 
     <li><a href="#view2">ABOUT ME</a></li> 
     <li><a href="#view3">SERVICES</a></li> 
     <li><a href="#view4">CURRENT PROJECT</a></li> 
     <li><a href="#view5">PORTFOLIO</a></li> 
     <li><a href="#view6">CONTACT ME</a></li> 
    </ul> 
    </div> 
    </nav> 
</div> 

CSS：

.container { 
    margin: 0 auto; 
    width: 1200px; 
} 

.menu { 
    left: 0; 
    right: 0; 
    height: 80px; 
    position: fixed; 
    background-color: rgb(33, 33, 33); 
} 

.menu ul { 
    padding: 0; 
    margin: 0; 
    color: #fff; 
    list-style: none; 
    font-weight: bold; 
    height: 80px; 
    float: right; 
} 

.menu ul li { 
    display: inline-block; 
    padding-right: 50px; 
} 

Answer 1

あなたはページのwidthに等しいwidthを持つように見える背景効果を作成するための:beforeまたは:after擬似セレクタを使用することができます。

body { 
 
    overflow: hidden; 
 
    width: 100%; 
 
    margin: 0; 
 
} 
 
.container { 
 
    max-width: 1200px; 
 
    margin: 0 auto; 
 
} 
 

 
.menu { 
 
    height: 80px; 
 
    position: relative; 
 
} 
 

 
.menu:before { 
 
    background-color: rgb(33, 33, 33); 
 
    position: absolute; 
 
    right: -9999px; 
 
    left: -9999px; 
 
    content: ''; 
 
    z-index: -1; 
 
    bottom: 0; 
 
    top: 0; 
 
} 
 

 
.menu ul { 
 
    padding: 0; 
 
    margin: 0; 
 
    color: #fff; 
 
    list-style: none; 
 
    font-weight: bold; 
 
    float: right; 
 
} 
 

 
.menu ul li { 
 
    display: inline-block; 
 
    padding-right: 50px; 
 
} 
 
.menu ul li a { 
 
    color: #fff; 
 
}

<div class="container"> 
 
    <nav class="menu"> 
 
    <ul> 
 
     <li><a href="#view1">HOME</a></li> 
 
     <li><a href="#view2">ABOUT ME</a></li> 
 
     <li><a href="#view3">SERVICES</a></li> 
 
     <li><a href="#view4">CURRENT PROJECT</a></li> 
 
     <li><a href="#view5">PORTFOLIO</a></li> 
 
     <li><a href="#view6">CONTACT ME</a></li> 
 
    </ul> 
 
    </nav> 
 
</div>