文字の間隔を調整する［letter-spacing］を指定したとき、同時に［text-align:center;］や［text-align:right;］を設定していると、最後の文字の後ろに空欄が挿入されているために思うように描画できないことが多々あります。

例えば「あいうえお」という文字列に［letter-spacing:1em;］と指定した場合。
仮に、挿入される空白を「□」で表すと、以下のように表示されます。

あ□い□う□え□お□

テキストを左揃え［text-align:left;］にしているときは気づきませんが、問題は中央揃え［text-align:center;］にしたときと右揃え［text-align:right;］にしたときです。

それぞれの文字の後ろに余白が挿入されているために、中央揃えのときは中央よりも左にズレてしまい、右揃えのときは右端に綺麗に揃えることができません。

そこで考えられるのが、テキスト・インデントを使う方法とネガティブ・マージンを使う方法です。

中央揃えのときはテキスト・インデントを、右揃えのときはネガティブ・マージンを、それぞれ指定するとことで［letter-spacing］の表示エラーを解決することができます。

中央揃えのとき

.sample {
letter-spacing:1em;
text-align:center;
text-indent:1em;
}

イメージとしては、以下のような感じです。

■…text-indent
□…letter-spacing

■あ□い□う□え□お□

右揃えのとき

.sample {
letter-spacing:1em;
text-align:right;
margin-right:-1em;
}

こちらは「margin-right」にネガティヴ・マージンを指定することで、文字列の最後の余白をキャンセルしている感覚ですね。

どちらのケースも共に、余分なクラス名や疑似セレクタを使わずに対処できる方法なので、比較的スマートな解決策だと思います。
［letter-spacing］でお困りの際はこの記事を思い出してくださいね。