ナビメニューの文字が勝手に改行してしまいます。。。

各ナビメニューの文字が勝手に改行し2段になるのを改善したいです。

今、独学でwebページの模写をしています。
ナビメニューをbootstrapを用いて制作しているのですが、レスポンシブデザインを適応したところ各ナビメニューの文字が勝手に改行し２段になってしまいます。
色々調べたりして、試行錯誤したのですが、どうしても解決できず悩んでいます。
どなたかわかる方いればご教授頂けると大変助かります。。
よろしくお願いします。

(例)

はじめに　　　　料金プラン　　　商品　　　アクセス　　　店舗情報　　　キャンペーン

⬇︎

はじ　　　　　料金　　　　　商　　　　アク　　　　店舗　　　　　キャン
めに　　　　　プラン　　　品　　　　セス　　　　情報　　　　　ペーン

ソースコード

HTML
1<!doctype html>
2<html lang="Ja">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
8    <!-- Bootstrap CSS -->
9    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
10    <link rel="stylesheet" href="./index.css">
11
12    <title>模写</title>
13  </head>
14  <body>
15    <header>
16      <div class="header-a">
17        <div class="h-green">
18          <img src="img" alt="#">
19        </div>
20      </div>
21      <div class="h-white">
22        <nav class="navbar navbar-expand-md navbar-white">
23          <a href="#" class="navbar-brand"><img src="img" alt="#"></a>
24          <button class="navbar-toggler" data-toggle="collapse" data-target="#menu">
25            <span class="navbar-toggler-icon"></span>
26          </button>
27          <div id="#menu" class="collapse navbar-collapse">
28            <ul class="navbar-nav">
29              <li class="nav-item">はじめに</li>
30              <li class="nav-item">料金プラン</li>
31              <li class="nav-item">商品</li>
32              <li class="nav-item">アクセス</li>
33              <li class="nav-item">店舗情報</li>
34              <li class="nav-item">キャンペーン</li>
35            </ul>
36          </div>
37          <div class="h-apply">
38            <div class="mypage">
39              <a href="#" class="text-success font-weight-bold">マイページ</a>
40            </div>
41            <div class="apply">
42              <a href="#" class="btn btn-success rounded-pill">申し込む</a>
43            </div>
44          </div>
45        </nav>
46      </div>
47    </header>
48
49    <!-- Optional JavaScript -->
50    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
51    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
52    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
53    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
54  </body>
55</html>
56

css
1header{
2    width: 100%;
3
4    .header-a{
5        width: 100%;
6        height: auto;
7        background-color: $color;
8
9        .h-green{
10            max-width: 100%;
11            width: 88.5%;
12            margin: 0 auto;
13            height:100%;
14            text-align: center;
15            position: relative;
16            padding: 5.6% 0 0;
17    
18            img{
19                position: absolute;
20                top: 0;
21                left: 0;
22                right: 0;
23                bottom: 0;
24                width: 48%;
25                height: 100%;
26                margin: 0 auto;
27            }
28        }
29
30    }
31
32    .h-white{
33        width: 100%;
34        height: auto;
35
36        .navbar{
37            max-width: 100%;
38            width: 83.5%;
39            height: auto;
40            margin: 0 auto;
41            padding: 1.86% 0;
42
43            .navbar-brand{
44                padding: 0;
45                margin-right: 0.95%;
46                max-width: 100%;
47                width: 12.8%;
48                height: auto;
49                img{
50                    max-width: 100%;
51                    height: auto;
52                }
53            }
54            
55            .navbar-collapse{
56                max-width: 100%;
57                width: 56.1%;
58                height: auto;
59                ul{
60                    height: auto;
61                    max-width: 100%;
62                    width: 100%;
63                    li{
64                        list-style: none;
65                        padding: 1.7% 1.9%;
66                        margin-right: 1.5%;
67                        color: $color-2;
68                        font-weight: bold;
69                        font-size: 1.48vw;
70                        max-width: 100%;
71                        height: auto;
72                    }
73                }
74            }
75
76            .h-apply{
77                display: flex;
78                width: 21.8%;
79                max-width: 100%;
80                height: auto;
81                @import"import";
82
83                .mypage{
84                    width: 39.7%;
85                    max-width: 100%;
86                    height: auto;
87                    a{
88                        display: inline-block;
89                        font-size: 1vw;
90                        padding: 18% 10.7%;
91                        max-width: 100%;
92                        height: auto;
93                    }
94                }
95
96                .apply{
97                    width: 59.8%;
98                    max-width: 100%;
99                    height: auto;
100                    a{
101                        display: inline-block;
102                        max-width: 100%;
103                        height: auto;
104                        font-size: 1.4vw;
105                        font-weight: bold;
106                        padding: 6.4% 15% 6.4% 33.5%;
107                        background-color: $btn-success;
108                    }
109                }
110            }
111
112