.box2를 float으로 진행하셨는데 inline-block으로 진행하다가 막히는 점이 있습니다..ㅜ

안녕하세요! 레이아웃 강의를 진행하다가 가로로 정렬하는데 두가지 방법이 있다고 말씀해주셨는데, 강의에서는 float으로 진행을 해주셔서 저는  display속성을 inline-block으로 바꿔서 진행하는 방법으로 진행해보았습니다..!

그런데 문제는 전 강의처럼 inline-block으로 설정하고 부모요소인 .box2에 text-align을 center로 변경했을때 float처럼 붙지 않고 두개는 붙고 하나는 다른 줄에 이동해있더라구요...ㅜㅜ

혹시 제가 놓친부분이나 잘못한 부분이 있을까요..? 코드와 사진 첨부하겠습니다!

.container {
      border: 1px solid red;
      width: 1200px;
      margin: auto;
    }
    
    header {
      background-color: skyblue;
      overflow: hidden;
    }
    
    header article {
      /*공통적인 부분을 넣어주기*/
      background-color: gray;
      width: 300px;
      height: 100px;
    }
    
    .logo {
      float: left;
    }
    
    .navi {
      float: right;
    }
    
    .box1 {
      background-color: yellowgreen;
      height: 300px;
    }
    
    .box2 {
      text-align: center;
      background-color: greenyellow;
    }
    
    .box2 article {
      display: inline-block;
      width: 33.333333333%;
      height: 300px;
    }
    
    .sub1{
      background-color: darkgray;
    }
    
    .sub2{
      background-color: lightgray;
    }
    
    .sub3{
      background-color: lightslategray;
    }
    
    footer {
      background-color: skyblue;
      height: 100px;
    }