How can I make menu links extend all the way to the right?

Hi,

URL: http://goo.gl/b31gXC

I’m trying to make the menu links under the “Browse by Project” ribbon extend all the way to the right so that the right most link is aligned with the right side of the ribbon. If I increase the width of the links or if I increase the right margin, it’s too much and the links break to a new line. How can I make them extend all the way to the right without falling to a new line?

I tried adding this but it isn’t working. I’m sure it’s because the “count” is off. It’s not every 3rd menu item…

.top-category-menu li:nth-child(3n+3) {
margin-right: 0;
}

One problem you have is that the list items have a % width but px margins, meaning that the menu will break at some widths. I’ve played around with some styles and these work better:

#menu-top-categories li a {
margin: 0 2% 10px 0;
}

#menu-top-categories li.tutorials a, #menu-top-categories li.videos a {
width: 49%;
}

.top-category-menu li a {
width: 32%;
}

#menu-top-categories li.videos a {
margin-right: 0;
}

#menu-top-categories li:nth-child(3n+5) a {
margin-right: 0;
}

Thanks so much, Ralph.

The only thing that isn’t working this:

.top-category-menu li:nth-child(3n+5) {
margin-right: 0;
}

I need those smaller items to be 3 per line. I played with the 3n+5 and various other numbers, and I can’t get it to work. Any ideas?

Glad it helped.

Is there any reason you didn’t try out what I suggested?

#menu-top-categories li:nth-child(3n+5) a {
margin-right: 0;
}

Thank you again, Ralph. It’s working for me now. I think I just need to reduce the font size for the smaller screens and then I’ll be set. I appreciate your help!