부트 스트랩을 사용하여 div 사이의 HTML CSS 공간

부트 스트랩을 사용하는 행이 있고 첫 번째 자식과 마지막 자식을 제외한 각 섹션 사이에 공백을 추가하고 싶습니다. 그러나 내 코드로 인해 행이 오버플로됩니다.

HTML :

           <div class="row">
                <div class="col-md-4 section">
                    hello
                </div>
                <div class="col-md-4 section">
                    hello
                </div>
                <div class="col-md-4 section">
                    hello
                </div>
            </div>

CSS :

.section{
    background-color: red;
    margin-left: 5px;
    margin-right: 5px;
}
.section:first-of-type{
    margin-left: 0px;
    margin-right: 0px;
    background-color: green;
}
.section:last-of-type{
    margin-left: 0px;
    margin-right: 0px;
    background-color: blue;
}

출력 :

Hello         Hello
Hello