Nested element not centering with siblings

Question

In the snippet there is a down arrow: #arrowDown. I am struggling getting this arrow to be placed centered, under the title and subtitle. I ma using the class .total-center to center the title and subtitle and then put the arrow's wrap within this centering div.

Does anyone see why #arrowDown isn't centering both vertically and horizontally like the other items?

.total-center {
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 width: 100%;
}
#solMain {
 width: 100%;
 height: 100vh;
 background: red;
 background-repeat: no-repeat;
 background-size: 100% 100%;
 position: relative;
}
#solMainTitle, #solMainDesc {
 color: #FFF;
 text-shadow: 2px 2px #242424;
 line-height: 1.5em;
}
#solMainTitle {
 font-family: 'Muli', sans-serif;
 font-size: 1.7rem;
 font-weight: 800;
 text-transform: uppercase;
 margin-bottom: 50px;
}
#solMainDesc {
 font-family: 'Nunito', sans-serif;
 letter-spacing: .2rem;
 font-size: 1rem;
}
#arrowDownWrap {
 cursor: pointer;
 width: 25px;
 height: 25px;
 position: relative;
 text-align: center;
}
#arrowDownWrapInner {
 bottom: 40px;
 position: relative;
}
#arrowDown, #arrowDown2 {
    border: solid #FFF;
    border-width: 0 3px 3px 0;
 width: 25px;
 height: 25px;
    display: block;
    padding: 3px;
 -webkit-transform: rotate(45deg);transform: rotate(45deg);
 -webkit-transition: all 0.5s;transition: all 0.5s;
 position: absolute;
 top: 0;
 left: 0;
}
#arrowDownWrap:hover #arrowDown2 {
 -webkit-transform: translate(0,40px) rotate(45deg) ;transform: translate(0,40px) rotate(45deg);
 -webkit-transition: all 0.5s;transition: all 0.5s;
}

<section id="solMain">
 <div class="total-center">
  <h1 id="solMainTitle">Title Text</h1>
  <span id="solMainDesc">Subtitle text</span>
  <div id="arrowDownWrap">
   <div id="arrowDownWrapInner">
    <i id="arrowDown"></i>
    <i id="arrowDown2"></i>
   </div>
  </div>
 </div>
</section>