Can't Get Nav Bar to Stretch 100% - html

Question

The header stretches 100% fine but I can't seem to get the nav bar to stretch while maintaining the dropdowns. Most of my solutions have made the nav bar turn into a vertical bar and I don't want that. Any help would be appreciated.
Here is my code:
HTML
<header>
<img src="http://i.imgur.com/cosDXx1.png"/>
</header>
<nav>
<ul>
<li>Home</li>
<li>About
<!-- First Tier Drop Down -->
<ul>
<li>History</li>
<li>Brothers</li>
</ul>
</li>
<li>Philanthropy
<!-- First Tier Drop Down -->
<ul>
<li>Kovacs Walk</li>
<li>Greek God</li>
<li>Boys & Girls Club
<!-- Second Tier Drop Down -->
</ul>
</li>
<li>Membership</li>
<li>Photos</li>
<li>Contact</li>
</ul>
CSS
body {
margin:0px;
padding:0px;
}
header {
height:105px;
background-color:black;
text-align:center;
}
header img{
display:inline-block;
margin-right:auto;
margin-left:auto;
margin-right:auto;
}
nav {
width:100%;
}
nav ul {
padding:0;
list-style: none;
position: relative;
display:block;
float:left;
clear:right;
}
nav ul li {
display:list-item;
list-style: none;
background-color:#64abfb;
border-bottom:solid #2ecc71;
float:left;
}
nav ul li a {
display:block;
padding:15px 10px;
color:#FFF;
font-size:15px;
text-decoration:none;
font-family: 'Bree Serif', 'serif';
}
li a:hover {
background-color: #2ecc71;
text-decoration:none;
}
/* The Dropdown Styles */
/* =================== */
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute; top: 58px;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:list-item;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
position: relative;
border-bottom:none;
}
Heres a fiddle: http://jsfiddle.net/5dukbrsp/

Answer 1

Check this fiddle
I've given nav ul and nav ul li width as 100% and 16.66% respectively.Why 16.66%, because total width is 100% and you have 6 list items to show up. So 100/6=16.66
Hope you understood.
I've changed your css as follows
header img {
display:inline-block;
margin-right:auto;
margin-left:auto;
margin-right:auto;
}
nav {
width:100%;
float:left;
}
nav ul {
padding:0;
list-style: none;
position: relative;
display:block;
float:left;
clear:right;
width:100%;
}
nav ul li {
width:16.66%;
display:list-item;
list-style: none;
background-color:#64abfb;
border-bottom:solid #2ecc71;
float:left;
}
nav ul li a {
display:block;
padding:15px 10px;
color:#FFF;
font-size:15px;
text-decoration:none;
font-family:'Bree Serif', 'serif';
}
li a:hover {
background-color: #2ecc71;
text-decoration:none;
}
/* The Dropdown Styles */
/* =================== */
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
top: 58px;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:list-item;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
position: relative;
border-bottom:none;
}

Answer 2

The nav background wont stretch as there is no background on it! There is only the background on the links themselves. In this example I have changed the method of displaying your links horizontally from floats to display: inline-block.
Have an example (not centered)
Example with centered navigation using nav ul { text-align: center; }
Place your background on the nav:
nav {
width:100%;
background-color:#64abfb;
}
Change the nav ul li display to inline-block and remove the float.
nav ul li {
list-style: none;
background-color:#64abfb;
border-bottom:solid #2ecc71;
display: inline-block
}
Change the value of top to fix the gap in the dropdowns:
nav ul ul {
display: none;
position: absolute;
top: 50px;
}
The Complete CSS
body {
margin:0px;
padding:0px;
}
header {
height:105px;
background-color:black;
text-align:center;
}
header img{
display:inline-block;
margin: 0 auto;
}
nav {
width:100%;
background-color:#64abfb;
}
nav ul {
padding:0;
list-style: none;
position: relative;
display:block;
font-size: 0;
text-align: center;
}
nav ul li {
list-style: none;
background-color:#64abfb;
border-bottom:solid #2ecc71;
display: inline-block;
}
nav ul li a {
display:block;
padding:15px 10px;
color:#FFF;
font-size:15px;
text-decoration:none;
font-family: 'Bree Serif', 'serif';
}
li a:hover {
background-color: #2ecc71;
text-decoration:none;
}
/* The Dropdown Styles */
/* =================== */
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute; top: 50px;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:list-item;
}
/* First Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
position: relative;
border-bottom:none;
display: block;
text-align: left;
}