htmlで入れ子が反映されない

class="main"の中で、入れ子構造を作りたく以下のコードを作成しました。
しかし、main-ue-leftとmain-ue-centerのみ入れ子になっていて、main-ue-rightも入れ子に反映されていない状況です。

やりたいことは、main-sita-left,main-sita-center,main-sita-rightのボタン三つをmain要素の中に入れて横並びに配置したいです。

html
1<div id = "app">
2      <div class = "all">
3        <div class = "head">
4          <div class = "head-left">0</div>
5          <div class = "head-right">00</div>
6        </div>
7        <div class = "main">
8          <div class = "main-ue">
9            <button class = "main-ue-left">1</div>
10            <button class = "main-ue-center">2</div>
11            <button class = "main-ue-right">3</div>
12          </div>
13          <div class = "main-sita">
14            <button class = "main-sita-left">4</div>
15            <div class = "main-sita-center">5</div>
16            <div class = "main-sita-right">6</div>
17          </div>
18        </div>
19      </div>
20    </div>

css
1html,
2body {
3  height: 100%;
4  width: 100%;
5  margin: 0;
6}
7#app {
8  height: 100%;
9  width: 100%;
10  background-color: red;
11}
12.all {
13  height: 100%;
14}
15
16.head {
17  height: 20%;
18  width: 100%;
19  text-align: center;
20  display: flex;
21  padding-left: 20px;
22  padding-top: 20px;
23}
24  .head-left {
25    height: 30px;
26    width: 150px;
27    border: solid 1px;
28    border-radius: 2px;
29  }
30  .head-right {
31    height: 30px;
32    width: 150px;
33    border: solid 1px;
34    border-radius: 2px;
35    margin-left: 20px;
36  }
37
38.main {
39  height: 60vh;
40  width: 100%;
41  background-color: #fff;
42}
43  .main-ue {
44　  display:inline-block
45  }
46    .main-ue-left {
47      height: 100px;
48      width: 130px;
49      font-size: 30px;
50      border-radius: 5px;
51    }
52    .main-ue-center {
53      height: 100px;
54      width: 130px;
55      font-size: 30px;
56      border-radius: 5px;
57    }
58    .main-ue-right {
59      height: 100px;
60      width: 130px;
61      font-size: 30px;
62      border-radius: 5px;
63    }