Sub menu too narrow

I can't get the submenu wide enough.
The site:

http://toivalanurheilijat.fi/uusi/

I tried to change padding into this css:

#main-nav li ul li {
background-color: rgb(48, 48, 48);
display: block;
float: none;
min-height: 26px;
padding: 10px 10px 50px 20px;
position: relative;
width: 121px;

The link texts go into two row, but I want sub menu so wide, that link text fits into one row.
I hope you understand, what I mean

 

Use the following for #main-nav li ul and #main-nav li ul li:

#main-nav li ul {
left: 0;
line-height: 1.2em;
position: absolute;
top: 100%;
visibility: hidden;
width: auto;
}
#main-nav li ul li {
background-color: rgb(48, 48, 48);
display: block;
float: none;
min-height: 26px;
padding: 10px 10px 50px 20px;
position: relative;
}

Code (markup):

 

Thanks very much, it worked.

 

Another problem: when I click third link from the left in the main menu (Joukkueet), there is sub menus, for example 03-04 pojat. Why it's in two row, but for example 02 pojat is in one row?
Here below is whole css for the main-nav

#main-nav {
    background-color: rgb(40, 135, 184);
    min-height: 76px;
}

#main-nav > ul {
    margin: 0 auto;
    width: 980px;
}

#main-nav > ul > li {
    display: block;
    float: left;
    font-size: 14.4px; /*0.9em 14.4px*/
    line-height: 1.2em;
    max-width: 980px;
    min-height: 16px;
    padding: 20px 20px 20px 20px;
    position: relative;
    word-spacing: -1px; /*-0.05em -1px*/
    z-index: 1;
}

#main-nav li.has-sub-items {
    margin-right: 0;
    padding-right: 39px;
}

#main-nav li:hover {
    background: rgb(48, 48, 48);
}

#main-nav > ul > .has-sub-items {
    padding-left: 21px;
    padding-right: 38px;
}

#main-nav > ul > .has-sub-items:hover {
    background: rgb(48, 48, 48) url(images/arrow_down.png) no-repeat right top;
}

#main-nav li ul {
    left: 0;
    line-height: 1.2em; /*1.2em 17.28px*/
    position: absolute;
    top: 100%;
    visibility: hidden;
  width: auto;
}

#main-nav li ul li {
    background-color: rgb(48, 48, 48);
    display: block;
    float: none;
    min-height: 26px;
    padding: 10px 20px 10px 20px;
    position: relative;
}

#main-nav li:hover > ul {
    visibility: visible;
}
  
#main-nav li ul li:hover  {
    background: rgb(40,135,184);
}

#main-nav li ul .has-sub-items  {
    padding-right: 35px;
    background: rgb(48,48,48) url(images/arrow_right.png) no-repeat right center;
}

#main-nav li ul .has-sub-items:hover  {
    background: rgb(24,24,24) url(images/arrow_right.png) no-repeat right center;
}

#main-nav a {
    color: rgb(255, 255, 255);
    text-decoration: none;
}

Code (markup):

 

You might also try adding {white-space: nowrap}, like so:

#main-nav li ul li {
    ...
    white-space: nowrap;}

Code (markup):

cheers,

gary

 

Thank you very much for a quick answer. It worked. Now it's like it should be