패딩없이 맞춤형 거트에 거터를 추가하십시오.

Question

그래서이 상황에 어려움을 겪고 있습니다.
마크 업

<div id="container"> 
     <div class="grid"> 
      <div class="col-1-4"> 
       <div class="module"> 
        <h3>1/4</h3> 
       </div> 
      </div> 
      <div class="col-1-2"> 
       <div class="module"> 
        <h3>1/2</h3> 
       </div> 
      </div> 
      <div class="col-1-4"> 
       <div class="module"> 
        <h3>1/4</h3> 
      </div> 
     </div> 
</div> 

CSS의는

*{ 
    box-sizing : border-box; 
} 
[class *="col"]{ 
     float : left; 
     height : auto; 
     overflow: hidden; 
} 
.col-1-2{ 
     width : 50%; 
} 

.col-1-4{ 
    width : 25%; 
} 

#container{ 
    width : 960px; 
    padding : 20px; 
    margin : 10px auto 0 auto; 
} 

.module { 
    padding: 20px; 
    background: #eee; 
    font-family: sans-serif; 
} 

이 열이 제대로 나란히 표시합니다. 그러나 끝은 서로 붕괴되고 모든 것은 하나의 커다란 직사각형처럼 보입니다.

지금, 에 의해 배수구를 날조 [class*="col"]의 기존 CSS 스타일을 편집하고 그것에 padding-right : 20px을 추가하는 시도 내가 관리했습니다

처럼

[class *="col"]{ 
    float : left; 
    height : auto; 
    overflow: hidden; 
    padding-right : 20px; 
} 

지금 모든 것을 본다 거터에 넣을 수 있지만 세밀하게 보면 세 개의 회색 직사각형이 컨테이너 div의 가운데에 배치되지 않습니다. 오른쪽 방향으로 더 밀어 넣었다.
이 상황을 해결하는 방법은 무엇입니까? 누군가가 배설물을 추가하는 더 좋은 방법을 제안하면 정말 도움이 될 것입니다.

주셔서 감사합니다 CSS에 아래 추가

[class *="col"]{ 
    float : left; 
    height : auto; 
    overflow: hidden; 
    padding-left: 20px; 
} 

아래로 CSS를 변경 시도하십시오

Answer 1

당신이 할 수있는 블록의 좌우 테두리에 패딩 추가

[class *="col"]{ 
    float : left; 
    height : auto; 
    overflow: hidden; 
    padding : 0 10px; 
} 

및

#container{ 
    padding:10px; 
} 

Answer 2

(이미지 블루 하이라이트는 실제 열 크기를 제안)

[class *="col"]:first-child{ 
    padding-left : 0px; 
}