I have a 1000px wide container, within it there is a menu control with 5 items (links). Each item has a width of 200px in the CSS file to make use of the entire length of the line.
.level1
{
border-width: 0px;
margin: 0px;
padding: 0px;
background-color: #99FF66;
font-family: Arial, Helvetica, sans-serif;
color: #FF0000;
height: 20px;
font-size: 12px;
line-height: 20px;
text-align: center;
width: 200px;
}
However, upon loading the page, I notice that the last item does not fit on the same row as the others, resulting in two rows instead. This is due to the MenuItem being wider than specified.
The inserted black line is 200px wide while the link "vzkazy" exceeds this width. My question is: Why is the MenuItem wider and how can its width be set to 200px? Thank you.