CSS text in span is overlapping text within another when within a list

easier to show than explain:

As you can see on the second option the number is overlapping the first number. Where I want it to to expand so that its not overlapping this second one, but numbers on both are to the right of the container.

CSS code and HTML

<li class="team team-bottom">8. Salmonella/Onions   <span class="score">82</span> </li>

.score {font-size: 11px;text-transform: uppercase;color: #2C7399;font-weight: bold;font-family: 'Roboto Condensed', sans-serif;right: 3px;position: absolute;}
.team {padding: 0 5px;margin: 3px 0;height: 25px; line-height: 25px;white-space: nowrap; overflow: hidden;position: relative;}