CSS - Divs not centering with 'Auto: 0 Margin'

Question

I am trying to create a menu bar in CSS, the main buttons (blue divs) should be centering inside the nav bar (orange divs) leaving equal spave beteen each button as well.

For some reason using margin: 0 auto does not work.

here is my code:

.nav {
    height: 40px;
    width: 80%;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    background-color: lightsalmon;
}

.nav__btn-cont {
    width: 20%;
}

.nav__btn {
    height: 50px;
    width: -moz-calc(100% - 20px);
    width: -webkit-calc(100% - 20px);
    width: calc(100% - 20px);
    margin: 0 auto;
    background-color: lightblue;
}

---

<div class="nav">
        <div class="w3-row">
            <div class="w3-col nav__btn-cont">
                <div class="w3-col nav__btn">
                </div>
            </div>
            <div class="w3-col nav__btn-cont">
                <div class="w3-col nav__btn">
                </div>
            </div>
            <div class="w3-col nav__btn-cont">
                <div class="w3-col nav__btn">
                </div>
            </div>
            <div class="w3-col nav__btn-cont">
                <div class="w3-col nav__btn">
                </div>
            </div>
            <div class="w3-col nav__btn-cont">
                <div class="w3-col nav__btn">
                </div>
            </div>
        </div>
    </div>

here is my fiddle: http://jsfiddle.net/zpoqjc5s/

I was wodnering if anyone could pooint me in the right direction here, Any help or advice is appreciated, thank you in advance.

note that I am using bootstrap and w3.css

Answer 1

The w3-col class in the W3.css includes float:left.

.w3-col, .w3-half, .w3-third, .w3-twothird, .w3-threequarter, .w3-quarter {
    float: left;
}

...remove that for your buttons

    .nav__btn {
        height: 50px;
        width: -moz-calc(100% - 20px);
        width: -webkit-calc(100% - 20px);
        width: calc(100% - 20px);
        margin: 0 auto;
        background-color: lightblue;
        float:none; /* added this */
    }

JSFiddle Demo