Im trying to stretch the individual "li" elements within the "nav" element to fill the space that is 600px as defined in the HTML by the class="grid_8" in the that houses the "ul" Ive tried putting width:100%; in the nav, li { width: 100%;} and some various forms of that solution. No avail. I look to you masters!\[code\]<div class="container_12 clearfix" > <div class="grid_4"><!--logo--> <a href="http://stackoverflow.com/questions/12775340/index.html" alt="Above The Frey - Home page"> <img alt="Above The Frey - Home page" src="http://stackoverflow.com/questions/12775340/images/newLogo.png" /> </a> </div> <div class="grid_8"> <nav><!-- navigation--> <ul id="nav"> <li> <a href="http://stackoverflow.com/questions/12775340/schedule.html" >Schedule</a> </li> <li> <a href="http://stackoverflow.com/questions/12775340/schedule.html" >Portfolio</a> </li> <li> <a href="http://stackoverflow.com/questions/12775340/schedule.html" >Conntact</a> </li> <li class="stretch"></li> </ul> </nav> </div></div><!--video Container--><div class="container_12" id="videoContainer"><iframe id="videoBorder" width="560" height="315" src="http://www.youtube.com/embed/fEJOYp3ciD0" frameborder="0" allowfullscreen></iframe></div></html>Body {background-image: url("images/background.jpg");}#nav{padding:0;background-color: #333333;text-align: justify;}#nav li {display:inline;width:100%;width: 33%;text-align: center;}#nav li a { font-family:Arial; font-size:12px; text-decoration: none; float:left; padding:10px; background-color: #333333; color:#ffffff; border-bottom:1px; border-bottom-color:#000000; border-bottom-style:solid; margin-top: 100px;}#nav li a:hover { background-color:#9B1C26; padding-bottom:12px; border-bottom:2px; border-bottom-color:#000000; border-bottom-style:solid; margin: 0px; margin-top: 100px;}#nav.stretch { display: inline-block; width: 100%; /* if you need IE6/7 support */ display: inline; zoom: 1;} #videoContainer { background-color: #1f1f1f; padding: 20px;}`\[/code\]