Make my display:inline-block fit each link individually

[Scotty13]

My header links are different sizes. What ‘am I missing so each button will fit each individual link that’s a different size perfectly?

<style type="text/css">
a.button{
display:inline-block;
width:90px;
height:40px;
padding:5px;
border:1px #000000 solid;
text-align:center;
text-decoration:none;
color:#666666;
background:url(button_bg.png);
}
a.button:hover{
background:url(button_bg_hover.png);
text-decoration:none;
}
</style>

Thanks in advance,
S

[lucy24]

What am I missing so each button will fit each individual link that’s a different size perfectly?

width:90px;
height:40px;

? ? ?

Like the man said: Your mouth says "fit, fit" but your code says "same size, same size".

[alt131]

Hi Scotty, the point Lucy is making is that the browsers are obeying the width you have set for each <a>. If you want the links to expand when the link text is longer, consider min-width instead.