How to "stretch" navigation bar?

You mean you want this container to be the full width of the full browser window? Do not set a defined body width… make it 99%, but that may affect sub-content.

Well, just anything that makes the bar touch the end of the main page without it going to the 2nd line.

Do you have any idea how to do this?

You mean that very little bit of white space on the right?

Yes exactly.

Work on the style #navigation in style.css as it appears multiple times in style.css, without it the text wraps. What this means is your not fitting it all in the described area.

This is the code I’m using so far:

/* Make menu full-width */
#header { padding: 0 0 20px; }

#navigation { margin-left: 0; }

#navigation ul li { padding: 0 5px 0; }

#navigation ul li.page-item-572 { padding: 0 8px 0; }

The only problem is that it works in Firefox, but seems to overlap (to a 2nd line) in Chrome, and I was wondering how I could make it the same length in all browsers.

fix the width of all items, do the math…

Hi, in response to the your reply, I’m not sure what you mean by that. Can you clarify?

In addition, I have pulled out all the #navigation codes from my style.css that I found:

#navigation {
	float:left;
}

#navigation {
margin: 15px 0 0 10px;
border-top: 1px solid #EFEFEF;
border-bottom: 1px solid #EFEFEF;
}

#navigation ul li, #sidebar ul li {
	list-style-type: none;
}

#navigation {
    border-bottom: 1px solid #0099CC;
    border-top: 1px solid #0099CC;
    margin: -5px 0 0 10px;
}

/* Make menu full-width */
#header { padding: 0 0 20px; }

#navigation { margin-left: 0; }

#navigation ul li { padding: 0 5px 0; }

#navigation ul li.page-item-572 { padding: 0 9px 0; }

I reviewed already the associated css… it needs to be modified to fit the width of your container area and seems improper…there are very many techniques that can be used with CSS and all are browser dependent.

I’m sorry, I’m not really familiar with CSS terms. What do you mean by “width of your container area” or where can I find this so I can try to fix it?

let’s try this….stop trying to make it all fit…center the menu and remove paddng left and right and the borders too..in other words try a different approach to the problem..

Okay, I’ll try to get rid of the borders and see what happens…

Alright, it sort of looks better. I’ve gotten rid of the borders and removed the padding, but how do I center the menu?

backup first!

Try:

#navigation { margin-left: auto; margin-right: auto; }