Responsive Rotate Words CSS
<p>I am trying to make my rotate words responsive and centered on the page. This is code from GitHub and works with just HTML and CSS. When the browser is 100% the output is not centered on the page, it's off tho the right just a bit.  When the browser is narrowed, the span words do not line up correctly.  Any help is greatly appreciated!  -Chad</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>h1{
 color: #000;
 font-size: 44px;
 margin-top: 40px;
 text-align: center;
}
/*Sentence*/
.sentence{
     color: #222;
     font-size: 30px;
     text-align: left;
}
/*Pop Effect*/
.popEffect{
 display: inline;
 text-indent: 8px;
}
.popEffect span{
 animation: pop 12.5s linear infinite 0s;
 -ms-animation: pop 12.5s linear infinite 0s;
 -webkit-animation: pop 12.5s linear infinite 0s;
 color: #00abe9;
 opacity: 0;
 overflow: hidden;
 position: absolute;
}
.popEffect span:nth-child(2){
 animation-delay: 2.5s;
 -ms-animation-delay: 2.5s;
 -webkit-animation-delay: 2.5s;
}
.popEffect span:nth-child(3){
 animation-delay: 5s;
 -ms-animation-delay: 5s;
 -webkit-animation-delay: 5s;
}
.popEffect span:nth-child(4){
 animation-delay: 7.5s;
 -ms-animation-delay: 7.5s;
 -webkit-animation-delay: 7.5s;
}
.popEffect span:nth-child(5){
 animation-delay: 10s;
 -ms-animation-delay: 10s;
 -webkit-animation-delay: 10s;
}
/*Pop Effect Animation*/
@-moz-keyframes pop{
 0% { opacity: 0; }
 5% { opacity: 0; -moz-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); }
 10% { opacity: 1; -moz-transform: translateY(0px); }
 25% { opacity: 1; -moz-transform: translateY(0px); }
 30% { opacity: 0; -moz-transform: translateY(0px); }
 80% { opacity: 0; }
 100% { opacity: 0;}
}
@-webkit-keyframes pop{
 0% { opacity: 0; }
 5% { opacity: 0; -webkit-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px);}
 10% { opacity: 1; -webkit-transform: translateY(0px); }
 25% { opacity: 1; -webkit-transform: translateY(0px); }
 30% { opacity: 0; -webkit-transform: translateY(0px); }
 80% { opacity: 0; }
 100% { opacity: 0; }
}
@-ms-keyframes pop{
 0% { opacity: 0; }
 5% { opacity: 0; -ms-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); }
 10% { opacity: 1; -ms-transform: translateY(0px); }
 25% { opacity: 1; -ms-transform: translateY(0px); }
 30% { opacity: 0; -ms-transform: translateY(0px); }
 80% { opacity: 0; }
 100% { opacity: 0; }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;h1&gt;Pop Effect looks very
    &lt;div class="popEffect"&gt;
      &lt;span&gt;Handsome.&lt;/span&gt;
      &lt;span&gt;Clean.&lt;/span&gt;
      &lt;span&gt;Elegant.&lt;/span&gt;
      &lt;span&gt;Magnificent.&lt;/span&gt;
      &lt;span&gt;Adorable.&lt;/span&gt;
    &lt;/div&gt;
  &lt;/h1&gt;</code></pre>
</div>
</div>
</p>