text-align:center doesn't perfect center my Font Awesome icon

Question

I would like to center the arrow-down icon from Font Awesome in my div #first. name is centered, descr too, but when I want to center the content of arrow, it doesn't work..

Here's my HTML :

<div id="first">
    <div class="name">My Name</div>
    <div class="descr">Web Dev</div>
    <div class="arrow">
        <a class="scrollTo" href="#second">
            <i class="fa fa-arrow-down fa-4x"></i>
        </a>
    </div>
</div>

Here's my CSS :

body
{
    margin:0;
    padding:0;
    background:#252932;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight:400;
}

#first
{
    margin:0 90px 0 90px;
    height:100vh;
    background:#252932;
}

#first .name
{
    padding-top: 25vh;
    color:#fff;
    font-weight: bold;
    font-size:10vh;
    text-align: center;
}

#first .descr
{
    color:#195962;
    text-align: center;
    font-size: 4vh;
}

.arrow
{
    text-align:center;
}

.arrow i
{
    color:#fff;
    position:absolute;
    bottom:80px;
    transition:all 0.5s ease;
}

I would like to fix the arrow on the bottom of the page, that's why I use position:absolute; bottom:80px. But it seems these properties broke my display.

Answer 1

        *, *:before, *:after {
          box-sizing: border-box;
        }

        html{
            height:100%;
        }

        body
        {
            margin:0;
            padding:0;
            background:#252932;
            font-family: 'Source Sans Pro', sans-serif;
            font-weight:400;
        }

        #first
        {
            margin:0 90px 0 90px;
            min-height:100%;
            background:#252932;
            display:relative;
        }

        #first .name
        {
            padding-top: 25vh;
            color:#fff;
            font-weight: bold;
            font-size:10vh;
            text-align: center;
        }

        #first .descr
        {
            color:#195962;
            text-align: center;
            font-size: 4vh;
        }

        .arrow
        {

            background-color:blue;
            position: absolute;
            bottom:80px;
            left: 50%;
            display: block;
            width: 80px;
            height: 80px;
            margin-left: -40px;
            text-align: center;
            cursor: pointer;
        }

        .arrow a{
            display:block;
        }

        .arrow i
        {
            color:#fff;
            background-color:red;
            transition:all 0.5s ease;
            line-height:80px;
            text-align:center;

        }