CSS — Negate additional space added to last letter by letter-spacing property

Question

I'm just wondering if there is a nice clean way in which to negate the letter-spacing property slight problem when you need to center text. Note to best see the problem, make the jsfiddle preview window small enough so the text wraps on to two lines.

HTML

<div class="centered--element">
    <div class="center--line"></div>
    <h1>This is a example here</h1>
</div>

CSS

.centered--element{
    background: #f2f2f2;
    text-align: center;
    text-transform: uppercase;
}

/* problem property.. */
h1{ letter-spacing: 20px }

I've made this to demonstrate the problem: http://jsfiddle.net/tq3Gh/1/

Perhaps it's just me, but it's not looking 100% central. Please see:

However, removing the letter-spacing and it sits as one would expect. So to me there is an issue..

Here is the same example, but without letter spacing set:

Update

I've a better idea of the problem therefore I'm updating the question to make more sense and sum the problem up a whole lot better.

Ok so after much playing the problem is letter-spacing adds spacing to the right of each letter, INCLUDING the last letter, hence why I'm getting this issue. So, in order to negate this I'm going to try simply using margin-right: -(width of my letter spacing). I'm not sure if this will cause problems, but it beats another option where I could wrap spans around the elements I want to have letter-spacing — but that's far too ugly for me.

So my update CSS would look like:

h1{ letter-spacing: 20px; margin-right: -20px; }

Answer 1

ok, so actually its not a problem. Your center--element is 100% wide so actually the texts goes behind the the 2 columns in the side.

to show that I tired reducing opacity of side elements here

and when you actually give margin to the center--element it solves your problem here

.centered--element{
    background: rgba(0, 0, 0, 0.1);
    text-align: center;
    text-transform: uppercase;
    margin-left:90px;
    margin-right:90px;
}

Final Solution

It seems you need to indent the text by the same amount as the letter-spacing. The first letter does not have the spacing applied to the left side

.spacing2 {
  letter-spacing:0.9em;
  text-align: center;
  text-indent: 0.9em;
}

Final DEMO