Horizontal Anchor links

Horizontally centered alignment of current anchor link

HTML

<ul>
    <li>
        <a href="#box-1">link 1</a>
    </li>
    <li>
        <a href="#box-2">link 2</a>
    </li>
    <li>
        <a href="#box-3">link 3</a>
    </li>
    <li>
        <a href="#box-4">link 4</a>
    </li>
    <li>
        <a href="#box-5">link 5</a>
    </li>
</ul>
<div id="content">
    <div id="box-1">
        <p>Some text 1</p>
    </div>
    <div id="box-2">
        <p>Some text 2</p>
    </div>
    <div id="box-3">
        <p>Some text 3</p>
    </div>
    <div id="box-4">
        <p>Some text 4</p>
    </div>
    <div id="box-5">
        <p>Some text 5</p>
    </div>
</div>

CSS

ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #efefef;
    font-size: 0;
    text-align: center;
}

li {
    display: inline-block;
    padding: 0;
    margin: 0;
    font-size: 16px;
    line-height: 20px;
}

li > a {
    padding: 10px;
}

#content {
    white-space: nowrap;
    font-size: 0;
    text-align: center;
    width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    height: 300px; /*this is indicative*/
    transition:.3s;
    -webkit-animation-name: color2;
      -webkit-animation-duration: 5s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-func
    
}

#content > div {
    display: inline-block;
    width: 100%;
    font-size: 16px;
    height: 100%;
    max-height: 100%;
    padding-top: 20px;
    transition:.3s;
}

#content > div > p {
    margin: 0 auto;
    transition:.3s;
}

#box-1{
  background:#dedede;
}

#box-2{
  background:#dedade;
}
#box-3{
  background:#dfefde;
}
#box-4{
  background:#ff0045;
}
#box-5{
  background:#45ff00;
}