Question

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!

<div class="container_12 clearfix" >
    <div class="grid_4">
<!--logo--> <a href="index.html" alt="Above The Frey - Home page"> <img alt="Above The Frey - Home page" src="images/newLogo.png" /> </a>
    </div>

    <div class="grid_8">
                <nav>
<!-- navigation-->  <ul id="nav">

                    <li> <a href="schedule.html" >Schedule</a> </li>
                    <li> <a href="schedule.html" >Portfolio</a> </li>
                    <li> <a href="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;


}`

Answer 1

nav {width:100%},ul#nav {width:100%},ul#nav li {width:100%}
I guess this should work.