Extend element beyond container, but keep children within container - html

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>HOME</li>
<li>ABOUT ME</li>
<li>SERVICES</li>
<li>CURRENT PROJECT</li>
<li>PORTFOLIO</li>
<li>CONTACT ME</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>HOME</li>
<li>ABOUT ME</li>
<li>SERVICES</li>
<li>CURRENT PROJECT</li>
<li>PORTFOLIO</li>
<li>CONTACT ME</li>
</ul>
</nav>
</div>