user1110643
user1110643

Reputation: 29

UL LI Navigation Menu, Extra spacing?

I can not for the life of me figure out why the spacing is not even across the first navigation menu on my site:

http://www.eureporter.co/

I have set the widths correctly, but on both 'Citizen Journalism' and 'Photo Journalism' appear to have extra padding either side of them, I just want them all the be even!

Can anyone help?

Upvotes: 0

Views: 85

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105863

actually, to make even cells in a <table> or tags displayed as table-cell; , you only need to give a small value like : width:1%;. It will stretch evenly each 'cells' to fill the entire width of parent <table> or displayed as table.

http://codepen.io/anon/pen/FegoG (resize window's width to see what happens. you can copy/paste rules value for cells wher you need it : ) )

Upvotes: 0

Polygnome
Polygnome

Reputation: 7795

You are using display: table-cell; width: auto;, which makes each <li> using width relative to it's content.

Use

#main-navbar ul li a { 
    width: 159px !important;
}

To make them all equal width.

Upvotes: 1

Related Questions