부트스트랩 레이아웃 문제

 <div class="dashBoard">
      <h2 class="mb-3">Dashboard</h2>
      <div class="row">
          <div class="col-3 box-design"></div>
          <div class="col-3 box-design"></div>
          <div class="col-3 box-design"></div>
          <div class="col-3 box-design"></div>
      </div>
  </div>

현재 코드가 이러한데 레이아웃이 

ㅁ ㅁ ㅁ 

ㅁ 

이렇게 두줄로 잡힙니다. 

col-3 가 4개니까 한줄에 4개가 모두 들어가야 될것 같은데 안들어가네요 

box_design에 대한 css는 아래와 같습니다.

.box-design {
    border: 1px solid lightgray;
    border-radius: 5px;
    padding: 10px;
    margin: 10px;
    box-sizing: border-box;
}

div {
box-sizeing : border-box;
} 

margin을 0 으로 주면 정상적으로 4개가 한줄에 보이는데 margin을 사용하고싶어서요
대체 뭐가 문제인거죠 ?