CSS responsive menu width - html

Question

I'm making a simple website and I'm struggling one one thing...
Exactly, it's a menu navbar.
I've done it, but it's only positioning in left corner. What I want to do is to continue the color strip (#333) to the very end of the screen.
Here is the code:
#primary_nav_wrap {
margin: 0;
float: left;
}
#primary_nav_wrap ul {
background-color: #333;
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0;
}
#rectangle {
float: right;
position: relative;
width: 1200px;
overflow: hidden;
background: #333;
}
#primary_nav_wrap ul a {
display: block;
color: #fff;
text-decoration: none;
font-weight: 500;
line-height: 50px;
padding: 0 20px;
font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif
}
#primary_nav_wrap ul li {
position: relative;
float: left;
margin: 0;
padding: 0
}
#primary_nav_wrap ul li.current-menu-item {
background: #4CAF50
}
#primary_nav_wrap ul li:hover {
background: #282828
}
#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #333;
padding: 0
}
#primary_nav_wrap ul ul li {
float: none;
width: 200px
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 10px 15px
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%
}
#primary_nav_wrap ul li:hover>ul {
display: block
}
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>Portfolio
<ul>
<li>About me</li>
<li>Menu1</li>
<li>MenuMenu</li>
<li>MenuMenuMenu</li>
</ul>
<li>Menu2</li>
<li>Menu3
<ul>
<li>MenuMenuMenu</li>
<li>MenuMenu</li>
<li>MenuMenuMenu</li>
<li>MenuMenuMenu</li>
<li>MenuMenu</li>
<li>Menu</li>
<li>WutWut</li>
</ul>
</li>
<li>Contact</li>
</ul>
<!--
<div id="rectangle"></div>
-->
</nav>
I am still learning CSS, HTML and JS and this is my first attempts... Some code are mine, some not, but hey.. I'm trying to learn :)
The struggle is to continue menu background color (#333) to the end of the right side. As you can see I was trying to do that using a rectangle (do not kill me for that, please) and didn't worked out properly, ofc...
Help :(

Answer 1

#primary_nav_wrap {
width: 100%;
background:#333;
}
Just give 100% width and color the background

Answer 2

Simply set the width as 100% to #primary_nav_wrap and #primary_nav_wrap ul.
#primary_nav_wrap {
margin: 0;
float: left;
width: 100%;
}
#primary_nav_wrap ul {
background-color: #333;
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0;
width: 100%;
}
#rectangle {
float: right;
position: relative;
width: 1200px;
overflow: hidden;
background: #333;
}
#primary_nav_wrap ul a {
display: block;
color: #fff;
text-decoration: none;
font-weight: 500;
line-height: 50px;
padding: 0 20px;
font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif
}
#primary_nav_wrap ul li {
position: relative;
float: left;
margin: 0;
padding: 0
}
#primary_nav_wrap ul li.current-menu-item {
background: #4CAF50
}
#primary_nav_wrap ul li:hover {
background: #282828
}
#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #333;
padding: 0
}
#primary_nav_wrap ul ul li {
float: none;
width: 200px
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 10px 15px
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%
}
#primary_nav_wrap ul li:hover>ul {
display: block
}
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>Portfolio
<ul>
<li>About me</li>
<li>Menu1</li>
<li>MenuMenu</li>
<li>MenuMenuMenu</li>
</ul>
<li>Menu2</li>
<li>Menu3
<ul>
<li>MenuMenuMenu</li>
<li>MenuMenu</li>
<li>MenuMenuMenu</li>
<li>MenuMenuMenu</li>
<li>MenuMenu</li>
<li>Menu</li>
<li>WutWut</li>
</ul>
</li>
<li>Contact</li>
</ul>
<!--
<div id="rectangle"></div>
-->
</nav>