title: Responsive Rotate Words CSS
body: <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>