jQuery tablesorter icons not displaying correctly with text-start or text-end

Question

I'm using jQuery tablesorter and the icons are not aligning correctly in the header columns. The icons are overlapping with the column header text. See image. I've narrowed it down to columns using text-end or text-start. Is there a way to correct this? I'm using the default css for the icons, below.

Thanks Angel

.tablesorter-header {
    background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
    background-position: left;
    background-repeat: no-repeat;
    cursor: pointer;
    white-space: normal;
    padding: 4px 220px 4px 4px;
}
.tablesorter-headerAsc {
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
}
.tablesorter-headerDesc {
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
}
.tablesorter .sorter-false {
    background-image: none;
    cursor: default;
    padding: 4px;
}