CSS - Divs가 'Auto : 0 Margin'을 중심으로하지 않음

Question

CSS에서 메뉴 막대를 만들려고 할 때 주 버튼 (파란색 div)이 탐색 막대 (주황색 divs) 안쪽에 있어야하며 각 버튼이 동등한 수준이어야합니다 게다가.

margin: 0을 사용하면 어떤 이유로 자동으로 작동하지 않습니다. http://jsfiddle.net/zpoqjc5s/

사람이 여기에 올바른 방향으로 날 pooint 수 있다면 내가 wodnering하고, 어떤 도움이나 조언 : 여기

---

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

.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을 사용하고

참고

Answer 1

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

JSFiddle Demo