CSS - Div並非以'Auto：0 Margin'爲中心

Question

我想在CSS中創建一個菜單欄，主按鈕（藍色div）應該以導航欄（橙色div）爲中心，每個按鈕留下相等的spave beteen以及。

由於某種原因，使用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; 
} 

---

<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> 

這裏是我的小提琴：http://jsfiddle.net/zpoqjc5s/

我wodnering如果有人能pooint我在朝着正確的方向，任何幫助或建議表示感謝，提前謝謝。

注意，我用的引導和w3.css

Answer 1

的w3-col類的W3.css包括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 */ 
    } 

JSFiddle Demo