marginが親要素からはみ出てしまう。余白を作りたい。

view_btnクラスの下に余白を開けるべくmarginで上下に余白を取ったのですが、
下側のみ親要素のinnerからはみ出てしまいました。

イメージでは、
子要素のview_btnのmarginを設定すればそれに従って親要素が下に伸びてくれると思ったのですが、、、

親要素innerのheightは指定していないので初期値のautoになっている状態ですよね？
子要素の高さによって自動調節されるのではないのですか？

どのようにすればview_btnの下に余白が空けられるのでしょうか。
どなたかお力を貸してください。

どうぞよろしくお願いします。

HTML
1         <section>
2                <!--News-->
3                <div class="inner">
4                    <h2>
5                        News
6                    </h2>
7                    <ul class="news_list">
8                        <li>
9                            <a href="#" class="news_contents">
10                                <div class="day">2021.03.10</div>
11                                <div class="label label-b">Blog</div>
12                                <div class="text">テキストテキストテキスト</div>
13                            </a>
14                        </li>
15                        ・・・省略・・・
16                            <li>
17                                <a href="#" class="news_contents">
18                                    <div class="day">2021.01.12</div>
19                                    <div class="label">News</div>
20                                    <div class="text">テキストテキストテキスト</div>
21                                </a>
22                            </li>
23                        </ul>
24                    <!--</div>-->
25                    <div class="view_btn">
26                        <a href="shop_top.html">View&nbsp;More</a>
27                    </div>
28                </div>
29            </section>

CSS
1* {
2    padding: 0;
3    margin: 0;
4    box-sizing: border-box;
5    text-align: center;
6}
7.inner {
8    width: 50%;
9    margin: 0 auto;
10    background-color: #97f38b;
11}
12h2 {
13    padding: 15px;
14}
15.news_contents {
16    display: flex;
17    justify-content: center;
18}
19.news_list li {
20    margin: 5px 0;
21}
22.day {
23    width: 80px;
24}
25.label {
26    width: 80px;
27    margin: 0 30px;
28    background-color: #7CBCD8;
29    color: #FFFFFF;
30}
31.text {
32    width: 360px;
33    text-align: left;
34}
35.view_btn {
36    width: 210px;
37    margin: 30px auto;
38    border: 1px solid;
39}