Full stretch horizontal menu

[lucifer17]

Anyone can help me figure out how to stretch out my menu like this http://heatfreehair.com/Here's how mine is looking right now http://dev1.envisionwebdesign.co/Below is the php code for the wordpress based site.\[code\]<header id="header" class="col-full"><nav id="navigation" class="col-full" role="navigation"> <?php if ( function_exists( 'has_nav_menu' ) && has_nav_menu( 'primary-menu' ) ) { wp_nav_menu( array( 'depth' => 6, 'sort_column' => 'menu_order', 'container' => 'ul', 'menu_id' => 'main-nav', 'menu_class' => 'nav fr', 'theme_location' => 'primary-menu' ) ); } else { ?> <ul id="main-nav" class="nav fl"> <?php if ( is_page() ) $highlight = 'page_item'; else $highlight = 'page_item current_page_item'; ?> <li class="<?php echo $highlight; ?>"><a href="http://stackoverflow.com/questions/15485106/<?php echo esc_url( home_url('/' ) ); ?>"><?php _e( 'Home', 'woothemes' ); ?></a></li> <?php wp_list_pages( 'sort_column=menu_order&depth=6&title_li=&exclude=' ); ?> </ul><!-- /#nav --> <?php } ?> </nav><!-- /#navigation --></header><!-- /#header -->\[/code\]Below is the css\[code\]#navigation {float: left;clear: both;margin-bottom: 0;display: none;}#header #navigation {display: block !important;margin-top: 150px;}#header #navigation ul.nav {float: left;}#header #navigation ul.nav > li a {background: #000000;float: left;height: 30px;line-height: 30px;display: block;font-family: "Agency", Verdana;font-size: 21px;font-weight: normal;color: #ffffff;height: 30px; padding: 0 44px;-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;text-transform: uppercase;}#header #navigation ul.nav > li a:hover {border-color: #e8e3e5;background: #000000;color: #f91483;}#header #navigation ul.nav > li:hover a {background: #fff;}#header #navigation ul.nav > li.current-menu-item > a,#header #navigation ul.nav > li.current_page_item > a {color: #f91483;}#header #navigation ul.nav > li.parent a { -webkit-border-bottom-left-radius: 0;-webkit-border-bottom-right-radius: 0;border-bottom-left-radius: 0;border-bottom-right-radius: 0;-moz-background-clip: padding;-webkit-background-clip: padding-box;background-clip: padding-box;}#header #navigation ul.nav > li.parent a:after {font-family: 'Agency';display: inline-block;font-size: .857em;margin-left: .618em;content: ";";color: #ffffff;font-weight: normal;}#header #navigation ul.nav > li.parent a:hover:before {content: "";display: block;height: 2px;position: absolute;bottom: -1px;left: 0;right: 0;background: #fff;z-index: 99999;}#header #navigation ul.nav > li.parent:hover a:before {content: "";display: block;height: 2px;position: absolute;bottom: -1px;left: 0;right: 0;background: #fff;z-index: 99999;}#header #navigation ul.nav > li.parent:hover a:after {color: #ff007b;}#header #navigation ul.nav > li.parent ul li a:after {visibility: hidden;}#header #navigation ul.nav > li.parent ul li.parent a:after {visibility: visible;content: "]";float: right;}#header #navigation ul.nav > li.parent ul li.parent ul li a:after {visibility: hidden;}#header #navigation ul.nav > li.parent ul li.parent ul li.parent a:after {visibility: visible;content: "]";}#header #navigation ul.nav > li.parent ul li.parent ul li.parent ul li a:after {visibility: hidden;}#header #navigation ul.nav ul {border: none;margin-top: -1px;padding: .372em 0;box-shadow: 0 0.202em 0 0 rgba(232, 227, 229, 0.4);-webkit-box-shadow: 0 0.202em 0 0 rgba(232, 227, 229, 0.4);background: #fff;}#header #navigation ul.nav ul ul {left: 100%;top: -0.372em;}h3.nav-toggle {display: none;}\[/code\]