On my site http://www.tandsbespokekitchens.com/ i am having a problem with links in the header. It seems that there is only a limited amount of space there instead of being able to use the whole width for links to different pages. If you look at the header you can see the word Kitchens in the middle, then if you look closely underneath the 'Home' tab there's a a little line which is meant to be part of the kitchen link and meant to read 'Kitchen Showroom'. Now for some reason the showroom part has dropped onto a new line and i don't know how to edit the HTML so the links stretch the green header. I have included the html and if some one can have a quick look for me so i can extend links all the way along i'd be extremely grateful. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title><?php if (is_home () ) { bloginfo(‘name’); } elseif ( is_category() ) { single_cat_title(); echo ' - ' ; bloginfo(‘name’); } elseif (is_single() ) { single_post_title();} elseif (is_page() ) { single_post_title();} else { wp_title(‘’,true); } ?></title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css" /> <!--[if IE 6]> <style type="text/css"> /*<![CDATA[*/ div#about_author {width: 719px;}; div#ad1{margin-left: 5px;}; div#ad2{margin-right: 5px;}; div#ad3{margin-left: 5px;}; div#ad4{margin-right: 5px;}; div#post .dots{margin-top: 0px;}; div#content .comments{margin: 10px 0 20px 10px;}; div#blogroll {width: 280px;}; div#post .details{margin: -14px 0 12px 23px;}; div#content{margin: 0 280px 0 0px;}; div#content .comments{width: 658px;}; /*]]>*/ </style> <![endif]--> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="pingback" href="xmlrpc.php" /> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="xmlrpc.php?rsd" /> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="wlwmanifest.xml" /> </head> <body> <div id="container"> <div id="header"> <div id="logo"> <a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('description');?>"><?php bloginfo('name'); ?></a> <br /><div id="sub"><?php bloginfo('description');?></div> <!-- <a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('description');?>"><img src="<?php bloginfo('template_directory'); ?>/images/logo.gif" alt="<?php bloginfo('description');?>" /></a> --> </div> <div id="search"> <form action="<?php bloginfo('url'); ?>" method="get"> <input onfocus="this.value=''" type="text" name="s" value="Type here your search" class="textfield" style="display: inline;"/><input type="image" src="<?php bloginfo('template_directory'); ?>/images/button-search.gif" style="display: inline;" /> </form> </div> </div> <div id="header2"> <div id="header2_left"> <a href="<?php bloginfo('url'); ?>">Home</a> <a href="<?php bloginfo('url'); ?>/about/">About Us</a> <a href="<?php bloginfo('url'); ?>/building-services/">Building Services</a> <a href="<?php bloginfo('url'); ?>/contact/">Contact us</a> <a href="<?php bloginfo('url'); ?>/kitchen-showroom/">Kitchen Showroom</a> </div> </div> <div id="wrapper"> <div id="content"> <!-- <div id="About Us"> <?php include (TEMPLATEPATH . '/about-author.txt'); /* Open about-author.txt to edit */?> </div> --> Code (markup):
open your decker.css find this code div#header2_left{ width: 410px; height: 23px; margin:0; margin-top: 7px; padding-left: 26px; float: left; } increase the width value