XF 2.0 Custom user rank bars not lined up

[vx22]

Can anyone help me fix this? My custom user rank bars don't like up correctly:

The space between them is not uniform either.

Here is the css stuff for them:

.Owner {
background-image: url('banners/owner.svg');
background-repeat: no-repeat;
height: 34px;
width: 124px;
text-indent: -9999px;
white-space: nowrap; 
}

.Reseller {
background-image: url('banners/reseller.svg');
background-repeat: no-repeat;
height: 34px;
width: 124px;
text-indent: -9999px;
white-space: nowrap; 
}

.Manager {
background: url('banners/manager.svg');
background-repeat: no-repeat;
height: 34px;
width: 124px;
text-indent: -9999px;
white-space: nowrap;
}

.Tester {
background-image: url('banners/testers.svg');
background-repeat: no-repeat;
height: 34px;
width: 124px;
text-indent: -9999px;
white-space: nowrap; 
}

.Manager {
background-image: url('banners/manager.svg');
background-repeat: no-repeat;
//height: 34px;
width: 124px;
text-indent: -9999px;
white-space: nowrap; 
}

.Developer {
background-image: url('banners/developer.svg');
background-repeat: no-repeat;
height: 34px;
width: 124px;
text-indent: -9999px;
white-space: nowrap; 
}

.TrialDeveloper {
background-image: url('banners/trialdeveloper.svg');
background-repeat: no-repeat;
height: 34px;
width: 124px;
text-indent: -9999px;
white-space: nowrap; 
}

.Support {
background-image: url('banners/support.svg');
background-repeat: no-repeat;
height: 34px;
width: 124px;
text-indent: -9999px;
white-space: nowrap; 
}

.TrialSupport {
background-image: url('banners/trialsupport.svg');
background-repeat: no-repeat;
height: 34px;
width: 124px;
text-indent: -9999px;
white-space: nowrap; 
}

.Registered {
background-image: url('banners/registered.svg');
background-repeat: no-repeat;
height: 34px;
width: 124px;
text-indent: -9999px;
white-space: nowrap;
}