将元素延伸到容器之外，但将子代保留在容器中

Question

I've recently had a problem, where I want to keep all my content within a parent container, but I want the navigation background to be 100% of the width of the page. The methods I've tried have worked in terms of getting the navigation to be 100% width of the page, but now the ul inside isn't affected by the container, which is what I originally wanted.

I got it to work by using another container div inside the navigation, but I feel like this is a very makeshift method.

Any suggestions on how to get the parent container to affect the ul inside the nav?

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

You can use :before or :after pseudo selector for creating background effect that looks like having width equal to the width of the page.

 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>