Alignement du centre de texte avec espacement des lettres

J'ai remarqué un comportement étrange dans l'utilisation de la lettre de l'espacement et de l'text-align:center ensemble.
L'augmentation de l'espace, apporter le texte pour être plus près de la marge gauche de l'élément.

HTML

<div>
  <p>- Foo Bar Zan -</p>
</div>

CSS

div {
  width: 400px;
  height:400px;
  background-color: #3b0d3b;
  text-align:center;
  margin:auto;
}

p {
  color:#fff;
  margin-top: 40px;
  text-align:center;
  padding-top:30px;
  font-size: 1.2em;
  letter-spacing:.9em;  <--- Here is the problem
}

J'ai créer un codepen pour montrer ce que je veux dire.
J'aperçois le même comportement sur le dernier Firefox et Chrome.
Est-il un moyen de corriger ce problème?

source d'informationauteur pasine