title: Centering Scrolling Text
body: <p>I have the following HTML:</p>
  
  <pre><code>                &lt;div id="square" class="zoomInUp animated"&gt; &lt;p class="header-name"&gt;Theo Bearman&lt;/p&gt; 
              &lt;p class="header-title"&gt;Interests in &lt;span class="rw-words rw-words-1"&gt;
                      &lt;span&gt;Web Designer&lt;/span&gt;
                      &lt;span&gt;Web Developer&lt;/span&gt;
                      &lt;span&gt;Graphic Designer&lt;/span&gt;
                  &lt;/span&gt;&lt;/p&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And the following CSS:</p>
  
  <pre><code>/* Animated words ------------------------------------------------- */
  
  .rw-words{
  text-indent: 10px;
  font-size: 16px;
  font-weight: 100;
  text-align: center
  }
  .rw-words-1 span{
  position: absolute;
  opacity: 0;
  overflow: hidden;
  -webkit-animation: rotateWord 9s linear infinite 0s;
  -ms-animation: rotateWord 9s linear infinite 0s;
  animation: rotateWord 9s linear infinite 0s;
  text-align: center
  }
  .rw-words-1 span:nth-child(2) { 
  -webkit-animation-delay: 3s; 
  -ms-animation-delay: 3s; 
  animation-delay: 3s; 
  }
  .rw-words-1 span:nth-child(3) { 
  -webkit-animation-delay: 6s; 
  -ms-animation-delay: 6s; 
  animation-delay: 6s; 
  }
  
  @-webkit-keyframes rotateWord {
  0% { opacity: 0; }
  2% { opacity: 0; -webkit-transform: translateY(-30px); }
  5% { opacity: 1; -webkit-transform: translateY(0px);}
  25% { opacity: 1; -webkit-transform: translateY(0px); }
  40% { opacity: 0; -webkit-transform: translateY(30px); }
  80% { opacity: 0; }
  100% { opacity: 0; }
  }
  @-ms-keyframes rotateWord {
  0% { opacity: 0; }
  2% { opacity: 0; -ms-transform: translateY(-30px); }
  5% { opacity: 1; -ms-transform: translateY(0px);}
  25% { opacity: 1; -ms-transform: translateY(0px); }
  40% { opacity: 0; -ms-transform: translateY(30px); }
  80% { opacity: 0; }
  100% { opacity: 0; }
  }
  @keyframes rotateWord {
  0% { opacity: 0; }
  2% { opacity: 0; -webkit-transform: translateY(-30px); transform:        translateY(-30px); }
  5% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px);}
  25% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); }
  40% { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); }
  80% { opacity: 0; }
  100% { opacity: 0; }
  }
  @media screen and (max-width: 768px){
  .rw-sentence { font-size: 18px; }
  }
  @media screen and (max-width: 320px){
  .rw-sentence { font-size: 9px; }
  }
  </code></pre>
  
  <hr>
  
  <pre><code>.header-name2 {
  background-color: #000;
  padding: 5px 17px;
  display: inline-block;
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  border-left: 3px solid #f00;
  border-right: 3px solid #0045ff;
  }
  .header-title {
  font-size: 16px;
  font-weight: 100;
  
  }
  </code></pre>
  
  <p>What would I need to do to change my code so that header-title is centered underneath header-name2 with the scrolling words included?</p>
  
  <p>A live example is <a href="http://theobearman.com/cv/" rel="nofollow">here</a>. You can see that the text "Interests in" is centered but the scrolling words are not.</p>
  
  <p>Thanks in advance!</p>