Html CSS-不以'为中心的div；自动：0页边距'；

我试图在CSS中创建一个菜单栏，主按钮（蓝色div）应该居中于导航栏（橙色div）内，每个按钮之间的间距相等

由于某些原因，使用

margin:0

auto不起作用

这是我的密码：

.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;
}

---

这是我的小提琴：

如果有人能告诉我正确的方向，我很高兴，任何帮助或建议都将不胜感激，提前谢谢

---

请注意，我使用的是引导和w3.css，w3.css中的

w3 col

类包括

float:left

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

…移除按钮上的按钮

    .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 */
    }

---

w3.css中的

w3 col

类包括

float:left

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

…移除按钮上的按钮

    .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 */
    }

---

非常感谢，还有：如果我没有指定它，它怎么会包括float:left？这是W3.csm的一部分。还有，非常感谢：如果我没有指定它，它怎么会包括float:left？这是W3.css的一部分