smepayEssef
New Member
Can someone help me figure out how to evenly space my ul inside of my navigation? I basically want about 5px of padding on the right and left and then I want the text to evenly space throughout the remaining space.\[code\]body { background: #ffffff; text-align: center; font-family: helvetica, arial, sans-serif; line-height: 25px; margin-top: 0px; }h1 { font-size: 34px; line-height: 24px; color: #007a3d; }a:link { color: #007a3d; text-decoration: none; }a:hover { text-decoration: underline; }a:visited { color: #007a3d; }#container { width: 960px; margin: auto; text-align: center; }#container #godbar { width: 960px; height: 32px; margin: auto; position: relative; background: url(images/godbar_bg.jpg) repeat-x; border-left: 1px solid #dbc25e; border-bottom: 1px solid #dbc25e; border-right: 1px solid #dbc25e; }#container #godbar #godbarIcons { width: 100%; height: 32px; float: right; text-align: right; margin-top: 5px; margin-right: 5px; }#container #godbar #godbarIcons ul { display: inline; }#container #godbar #godbarIcons li { display: inline; padding-right:13px;}<!--END GODBAR-->#container #header { width: 960px; height: 150px;}#container #header #logo h1{ width: 233px; height: 94px; clear: both; display: block; background: red; margin: 0 0 0 15px; background: url(images/logo.jpg) no-repeat; text-indent: -9999px; }#container #header #logo h1 a { display: block; width: 233px; height: 94px; }#container ul#nav { height: 44px; text-align: center; margin: 5px 0px 0px 0px; background: url(images/navigation_bg.jpg) repeat-x; list-style: none; display: block; }#container ul#nav a:hover { text-decoration: none; }#container ul#nav li { margin-top: 5px; display: inline; float: left; padding: 5px; text-transform: uppercase; }#container ul#nav a { color: #FFF; display: inline-block; } <body><div id="container"> <!--GODBAR--> <div id="godbar"> <div id="godbarIcons"> <ul> <li id="godbarFacebook"><a href="http://www.facebook.com/hilounge" target="_blank"><img src="http://stackoverflow.com/questions/15912233/images/godbar_fb.png" alt="hilounge on Facebook" /></a> </li> <li id="godbarTwitter"><a href="http://www.twitter.com/hilounge" target="_blank"><img src="http://stackoverflow.com/questions/15912233/images/godbar_twitter.png" alt="hilounge on Twitter"/></a> </li> <li id="godbarInstagram"><a href="http://www.instagram.com/hilounge" target="_blank"><img src="http://stackoverflow.com/questions/15912233/images/godbar_instagram.png" alt="hilounge on Instagram" /></a> </li> <li id="godbarPinterest"><a href="http://www.pinterest.com/hilounge" target="_blank"><img src="http://stackoverflow.com/questions/15912233/images/godbar_pinterest.png" alt="hilounge on Pinterest" /></a> </li> <li id="godbarGplus"><a href="https://plus.google.com/b/108830451064104477365/108830451064104477365/posts" target="_blank"><img src="http://stackoverflow.com/questions/15912233/images/godbar_gplus.png" alt="hilounge on Goolge plus" /></a> </li> <li id="godbarRss"><a href="http://feeds.feedburner.com/hilounge" target="_blank"><img src="http://stackoverflow.com/questions/15912233/images/godbar_rss.png" alt="hilounge RSS feed" /></a> </li> <li id="godbarEmail"><a href="http://feedburner.google.com/fb/a/mailverify?uri=hilounge&loc=en_US" target="_blank"><img src="http://stackoverflow.com/questions/15912233/images/godbar_email.png" alt="hilounge email" /></a> </li> </ul> </div> <!--END GODBARICONS--> </div> <!--END GODBAR--> <!--BEGIN HEADER--> <div id="header"> <!--BEGIN LOGO--> <div id="logo"> <h1><a href="http://stackoverflow.com/questions/15912233/index.html">hiLounge</a></h1> </div> <!--END LOGO--> <!--BEGIN NAVIGATION--> <ul id="nav"> <h2 class="nav"><li><a href="http://stackoverflow.com/questions/15912233/#"> News </a></li> <li><a href="http://stackoverflow.com/questions/15912233/#"> Entertainment </a></li> <li><a href="http://stackoverflow.com/questions/15912233/#"> Fashion </a></li> <li><a href="http://stackoverflow.com/questions/15912233/#"> Munchies </a></li> <li><a href="http://stackoverflow.com/questions/15912233/#"> Design </a></li> <li><a href="http://stackoverflow.com/questions/15912233/#"> Reviews </a></li> <li><a href="http://stackoverflow.com/questions/15912233/#"> Contests </a></li> </h2> </ul> <!--END NAVIGATION--> </div> <!--END HEADER--> <!--BEGIN CAROUSEL--> <div id="carousel"> <ul> <a href="http://stackoverflow.com/questions/15912233/#">Previous</a> <li><a href="http://stackoverflow.com/questions/15912233/#">Slide 1</a></li> <li><a href="http://stackoverflow.com/questions/15912233/#">Slide 2</a></li> <li><a href="http://stackoverflow.com/questions/15912233/#">Slide 3</a></li> <li><a href="http://stackoverflow.com/questions/15912233/#">Slide 4</a></li> <li><a href="http://stackoverflow.com/questions/15912233/#">Slide 5</a></li> <a href="http://stackoverflow.com/questions/15912233/#">Next</a> </ul> </div> <!--END CAROUSEL--> <!--BEGIN MAIN--> <div id="primaryContent"> <h1><a href="http://stackoverflow.com/questions/15912233/#"> 10 Best Bongs You Wish You Made</a></h1> <a href="http://stackoverflow.com/questions/15912233/#"><img src="http://stackoverflow.com/questions/15912233/images/featured-post-featured-image.png" alt="Post Title" /></a> <!--BEGIN POSTMETADATA--> <div id="postMetaData"> <ul> <li><img src="http://stackoverflow.com/questions/15912233/images/date-icon.jpg" /> March 26, 2013</li> <li><a href="http://stackoverflow.com/questions/15912233/#"><img src="http://stackoverflow.com/questions/15912233/images/category-icon.jpg" /> Entertainment</a></li> <li><a href="http://stackoverflow.com/questions/15912233/#"><img src="http://stackoverflow.com/questions/15912233/images/author-icon.jpg" /> James Scaggs</a></li> </ul> </div> <!--END POSTMETADATA--> <p> In Half Baked, the MacGyver smoker stereotype really taught us that pot smokers can engineer some of the best bongs around when there