css properties : 'text-align: center' and 'letter-spacing: ...' product broken behaviour. Here is a patch.

patch.css

h1 {

  /* e.g. */
  font-size: 5em;

  /* problem */
  letter-spacing: 0.4em;  /* have fun when they went */ 
  text-align: center;     // both of them together!!

  /* solution                To fight end-of-line letter-spacing : */
  padding-left: 1em;      /* move all your content to the right    */
}

h1:after {               /* and move back the last line the left  */
  content: "";
  display: inline;
  padding-right: 0.65em;
}

patch.scss

@mixin letter-spacing-and-text-align-center($letter-spacing) { 

  // problem
  letter-spacing: $letter-spacing;  // have fun when they went 
  text-align: center;     // both of them together!!
 
  // solution                               // To fight end-of-line letter-spacing :
  padding-left: $letter-spacing * 2.5;      // move all your content to the right
  &:after {                                 // and move back the last line the left
    content: "";
    display: inline;
    padding-right: $letter-spacing * 1.625;
  }
 
}

// e.g.
h1 {
  font-size: 5em;
  @include letter-spacing-and-text-align-center(0.4em);
}