Hi DoPeT!

Try either of these solutions (from this StackOverflow answer); but first you'll need to wrap the narrower selects inside of a "fivesix" element instead of applying that class directly to the select:

.eight, .fivesix {
    overflow: hidden;
}
select {
    width: 120%;
    background: url("../images/select.png") no-repeat scroll 90% center #F2F2F2;
}

Alternatively, you could use text-indent to push the arrow out of view... and push your text to the right as well:

.eight, .fivesix {
    overflow: hidden;
}
select {
    text-indent: 50px; /* you'll need 50px in your case */
}

@Mottie Hey thanks!! Pretty helpful, as your second alternative actually worked out pretty well except obviously the text indent. Is there any way of 'forcing' the text back without the dropdown as well? Starting to look a lot better!

I've actually tried the third option before and seemed to not do the trick, however could've been my fault. I'm going to try that again as well!

Again, I appreciate for taking your time to review my markup like that and everything!