I can’t center the text

Question

I just got this css text animation in hongkiat.com:

http://codepen.io/yoannhel/pen/sJpDj

I can’t center the text at all. Pus display: block, text-align: center, position: relative e margin: auto em tudo, mas não centraliza. I put a yellow background in the div so I could see better.

.content {

  position: relative;
  top: 110px;
  display: inline-block;
  margin: auto;
  text-align: center;
  font-size: 2.5em;
  line-height: 60px;
  font-family: 'Lato', sans-serif;
  height: 160px;
  overflow:hidden;
}

.visible {
  background-color: yellow;
  overflow:hidden;
  height:60px;
  position: relative;
  display: inline-block;
  text-align: center;
  margin: auto;


  
  &:before {
    content:'[';
    
    line-height:60px;
    display: inline-block;
    text-align: center;
    margin: auto;

  }
  &:after {
    content:']';
    position:relative;
    display: inline-block;
    text-align: center;
    margin: auto;

   
    line-height:60px;
  }
  &:after, &:before {
    position:relative;
    display: inline-block;
    text-align: center;
    margin: auto;
    top:0;
    color:#16a085;
    font-size:60px;

    -webkit-animation-name: opacity;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-name: opacity;
    animation-duration: 2s;
    animation-iteration-count: infinite;

  }
}

.visible p {
	position: relative;
  display: inline-block;
  text-align: center;
  margin: auto;

}

.visible ul {
	position: relative;

  text-align:center;
  list-style:none;
  display: inline-block;
  margin: auto;

  -webkit-animation-name: change;
  -webkit-animation-duration: 6s;
  -webkit-animation-iteration-count: infinite;
  animation-name: change;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}

.visible ul li {
	position: relative;
  color: #2ba2df;
  line-height:60px;
  margin: auto;
  display: block;
  text-align: center;

}

@-webkit-keyframes opacity {
  0%, 100% {opacity:0;}
  50% {opacity:1;}
}

@-webkit-keyframes change {
  0%, 12%, 100% {transform:translateY(0);}
  17%,29% {transform:translateY(-25%);}
  34%,46% {transform:translateY(-50%);}
  51%,63% {transform:translateY(-75%);}
  68%,80% {transform:translateY(-50%);}
  85%,97% {transform:translateY(-25%);}
}

@keyframes opacity {
  0%, 100% {opacity:0;}
  50% {opacity:1;}
}

@keyframes change {
  0%, 12%, 100% {transform:translateY(0);}
  17%,29% {transform:translateY(-25%);}
  34%,46% {transform:translateY(-50%);}
  51%,63% {transform:translateY(-75%);}
  68%,80% {transform:translateY(-50%);}
  85%,97% {transform:translateY(-25%);}
}

<div class="content">
  <div class="visible">
      <ul>
      <li>Web Design</li>
      <li>Graphic Design</li>
	  <li>Motion Graphics</li>
	  <li>Photography</li>	
      </ul>
   </div>
</div>

Answer 1

Puts in the ul that:

padding: 0;
list-style: none;

Answer 2

Just you set the padding for his ul as 0px. See below the result:

.content {

  position: relative;
  top: 110px;
  display: inline-block;
  margin: auto;
  text-align: center;
  font-size: 2.5em;
  line-height: 60px;
  font-family: 'Lato', sans-serif;
  height: 160px;
  overflow:hidden;
}

.visible {
  background-color: yellow;
  overflow:hidden;
  height:60px;
  position: relative;
  display: inline-block;
  text-align: center;
  margin: auto;


  
  &:before {
    content:'[';
    
    line-height:60px;
    display: inline-block;
    text-align: center;
    margin: auto;

  }
  &:after {
    content:']';
    position:relative;
    display: inline-block;
    text-align: center;
    margin: auto;

   
    line-height:60px;
  }
  &:after, &:before {
    position:relative;
    display: inline-block;
    text-align: center;
    margin: auto;
    top:0;
    color:#16a085;
    font-size:60px;

    -webkit-animation-name: opacity;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-name: opacity;
    animation-duration: 2s;
    animation-iteration-count: infinite;

  }
}

.visible p {
	position: relative;
  display: inline-block;
  text-align: center;
  margin: auto;

}

.visible ul {
	position: relative;
  padding: 0;
  list-style: none;
  text-align:center;
  display: inline-block;
  margin: auto;

  -webkit-animation-name: change;
  -webkit-animation-duration: 6s;
  -webkit-animation-iteration-count: infinite;
  animation-name: change;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}

.visible ul li {
	position: relative;
  color: #2ba2df;
  line-height:60px;
  margin: auto;
  display: block;
  text-align: center;

}

@-webkit-keyframes opacity {
  0%, 100% {opacity:0;}
  50% {opacity:1;}
}

@-webkit-keyframes change {
  0%, 12%, 100% {transform:translateY(0);}
  17%,29% {transform:translateY(-25%);}
  34%,46% {transform:translateY(-50%);}
  51%,63% {transform:translateY(-75%);}
  68%,80% {transform:translateY(-50%);}
  85%,97% {transform:translateY(-25%);}
}

@keyframes opacity {
  0%, 100% {opacity:0;}
  50% {opacity:1;}
}

@keyframes change {
  0%, 12%, 100% {transform:translateY(0);}
  17%,29% {transform:translateY(-25%);}
  34%,46% {transform:translateY(-50%);}
  51%,63% {transform:translateY(-75%);}
  68%,80% {transform:translateY(-50%);}
  85%,97% {transform:translateY(-25%);}
}

<div class="content">
  <div class="visible">
      <ul>
      <li>Web Design</li>
      <li>Graphic Design</li>
	  <li>Motion Graphics</li>
	  <li>Photography</li>	
      </ul>
   </div>
</div>

Answer 3

I put padding on ul and apparently centered here.

.visible ul {
        padding: 10px 25px;
    }