how to make my menu width 100% of the browser using css - html

Question

I can't seem to get my menu 100% of the browser. I want a logo beside the menu in the header to. I tried in the CSS to add a background colour and width or 100% but this didn't work
Here is my code
#logo {
padding-top: 10px;
padding-left: 85px;
float: left;
}
/*----- Top Level -----*/
#menu2 {
background: #3b3b3b;
}
.menu > ul > li {
float: left;
display: inline-block;
position: relative;
font-size: 19px;
}
.menu > ul > li > a {
padding: 10px 40px;
display: inline-block;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}
.menu > ul > li:hover > a,
.menu > ul > .current-item > a {
background: #2e2728;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index: 1;
opacity: 1;
}
.sub-menu {
width: 160%;
padding: 5px 0px;
position: absolute;
top: 100%;
left: 0px;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
background: #2e2728;
}
.sub-menu li {
display: block;
font-size: 16px;
}
.sub-menu li a {
padding: 10px 30px;
display: block;
}
.sub-menu li a:hover,
.sub-menu .current-item a {
background: #3e3436;
}
<div id="menu2">
<div id="logo">
<img src="logo2.png" alt="logo" />
</div>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>Home
</li>
<li>About Us
</li>
<li>
What's On
<ul class="sub-menu">
<li>Sunday Services
</li>
<li>Speical Events
</li>
<li>Sunday School
</li>
<li>Youth Group
</li>
<li>Prayer Meeting
</li>
<li>Coffee Morning
</li>
<li>Woman's Fellowship
</li>
<li>Craft Class
</li>
<li>Diners Club
</li>
</ul>
</li>
<li>Get In Touch
</li>
<li class="current-item">Find Us
</li>
</ul>
</nav>
</div>

Answer 1

You just need to clear the floats: It's call a clearfix
There are many method of doing this...one is to add overflow:hidden to the wrapper
#menu2 {
background: #3b3b3b;
overflow: hidden;
/* quick clearfix */
}
Codepen Demo
#logo {
padding-top: 10px;
padding-left: 85px;
float: left;
}
/*----- Top Level -----*/
#menu2 {
background: #3b3b3b;
overflow: hidden;
/* quick clearfix */
}
.menu > ul > li {
float: left;
display: inline-block;
position: relative;
font-size: 19px;
}
.menu > ul > li > a {
padding: 10px 40px;
display: inline-block;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}
.menu > ul > li:hover > a,
.menu > ul > .current-item > a {
background: #2e2728;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index: 1;
opacity: 1;
}
.sub-menu {
width: 160%;
padding: 5px 0px;
position: absolute;
top: 100%;
left: 0px;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
background: #2e2728;
}
.sub-menu li {
display: block;
font-size: 16px;
}
.sub-menu li a {
padding: 10px 30px;
display: block;
}
.sub-menu li a:hover,
.sub-menu .current-item a {
background: #3e3436;
}
<div id="menu2">
<div id="logo">
<img src="logo2.png" alt="logo" />
</div>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>Home
</li>
<li>About Us
</li>
<li>
What's On
<ul class="sub-menu">
<li>Sunday Services
</li>
<li>Speical Events
</li>
<li>Sunday School
</li>
<li>Youth Group
</li>
<li>Prayer Meeting
</li>
<li>Coffee Morning
</li>
<li>Woman's Fellowship
</li>
<li>Craft Class
</li>
<li>Diners Club
</li>
</ul>
</li>
<li>Get In Touch
</li>
<li class="current-item">Find Us
</li>
</ul>
</nav>
</div>

Answer 2

The background in the css should be background-color: #FFFFFF