<a> horitzontal align slightly off center

Question

I have a link that I've tried to center using text-align:center and display:inline-block but it appears to be slightly off center. I've included pics and my code down below. Any help would be great, Thanks! The that is giving me trouble is under the class "button"

pic: http://imgur.com/eqOUI3q

HTML:

    <div class="headerContent">

        <nav>

            <ul class="navDown">  
                <li><a href="#">Intro</a></li>  
                <li><a href="#windSection">Wind</a></li>  
                <li><a href="#solarSection">Solar</a></li>  
                <li><a href="#nuclearSection">Nuclear</a></li>  
                <li><a href="#endSection">End</a></li>     
            </ul>

            <a href="#" class="menu-icon"><p class="menu"></p></a>

        </nav>

        <a href="#" class="scrollup">Scroll</a>
        <a href="#windSection" class="scrolldown">Scroll</a>

        <h1 class="title bigTitle">Going Green.</h1>

        <p class="headerText">
            A change is coming- and that change will be making the switch to green forms of energy.  If you are interested in learning how you can help the environment and save money over time- you have come to the right place. It is time to Energize Change.  <br><span class="emphasis">Click below to find the perfect green energy source for you and your family!</span>
        </p>

        <p class= "noElechouse"></p>

        <div class="select">

            <a class="button" href="links/calculator.html">Find Now</a>

        </div>

    </div>

CSS:

.headerContent {
    position:relative;
    width:55%;
    margin:auto;
    height:100%;
    text-align:center;

}

.title {
    font-family: 'Oxygen', sans-serif;
    font-weight:700;
    color:white;
    font-size:90px;
    padding-bottom:15px;
    padding-top:15px;
}

.headerText {
    position:absolute;
    bottom:35%;
    font-family: 'Oxygen', sans-serif;
    font-weight:400;
    font-size:18px;
    line-height:27px;
    width:90%;
    margin:auto;
    display:block;
    left:0;
    right:0;
}

.select {
    text-align:center;
}

.button {
    position:absolute;
    display:inline-block;
    font-family: 'Oxygen', sans-serif;
    font-weight:normal;
    font-size:30px;
    color:white;
    bottom:10px;
    text-decoration:none;
    padding: 10px 20px;
}

Answer 1

Your main issue is with the usage of inline-block, which actually adds about 4px worth of space to the left. To remove this, either add -4px to your margins for the element, or as brouxhaha suggested, you can set the font-size to zero for the parent, and then reset it to whatever value you desire for the .button elements.

If you want more information regarding the inline-block issue, check this question I answered a few months ago: CSS Inline-block Dimension Discrepancies

Answer 2

I could completely center it when using

nav ul{
    padding: 0;
}

Answer 3

display: inline-block adds extra white-space to elements. There are some fixes for this (http://css-tricks.com/fighting-the-space-between-inline-block-elements/). I would recommend the "Set font size to 0 on parent" option for you since you don't have multiple items next to each other and you already have a font-size set on .button.

.select {
    font-size: 0;
}

You also have position: absolute set on .button. Remove that as well. If you actually need it positioned absolutely, I would recommend positioning the containing div.

Here's a Demo

OR you could just remove display: inline-block from .button.