レスポンシブ対応でnavi部分が縦になってしまう。

⚫︎前提・実現したいこと 

レスポンシブ対応でnavi部分が縦になってしまうのを改善したいです。 コードが長くて見にくくてすみません。お手数ですが、ご教授願います。
見本サイト　https://haniwaman.com/sample/part3/template_08/index.html

⚫︎見本サイト

⚫︎該当のソースコード

⚫︎HTML

        <div class="wrapper">

        <!-- ----------------ヘッダー------------------------ -->
            <div class="header-wrapper">
                <img src="images/siteTitle.png" alt="Dentalの写真" />
                <div class="contact">
                    <p class="explanation">"地域に根付いた歯科医院"デンタルクリニック</p>
                    <p class="tel">03-0000-0000</p>
                    <p class="reservation">予約受付時間　10:00~19:30 <span class="day">日祝 休診</p>
                </div>

                <!-- /* -----------------メニューナビ------------------- */ -->
                <div class="navi">
                    <ul>
                        <li>
                            <a href="index.html" class="first">
                                <span class="titleJa">トップページ</span>
                                <span class="titleEn">HOME</span>
                            </a>
                        </li>
                        <li>
                            <a href="clinic.html">
                                <span class="titleJa">医院紹介</span>
                            <span class="titleEn">CLINIC</span>
                            </a>
                        </li>
                        <li>
                            <a href="service.html">
                                <span class="titleJa">診療案内</span>
                                <span class="titleEn">SERVICE</span>
                            </a>
                        </li>　
                        <li>
                            <a href="staff.html">
                                <span class="titleJa">院長・スタッフ紹介</span>
                                <span class="titleEn">STAFF</span>
                            </a>
                        </li>
                        <li>
                            <a href="access.html">
                                <span class="titleJa">アクセス</span>
                                <span class="titleEn">ACCESS</span>
                            </a>
                        </li>
                    </ul>    
                    </div>
                </div>
            </div>引用テキスト
```


               
⚫︎CSSここから

```body {
    width: 920px;
    height: 100%;
    margin: 0 auto;
    background: #f6f6f6;
    color: #515151;
    font-family: Verdana, Arial, Helvetica, "meirio", "メイリオ",
        "Hiragino Maru Gothic Pro", "ヒラギノ丸ゴ Pro W4", Osaka,
        "ＭＳ Ｐゴシック", sans-serif;
}

.wrapper {
    width: 920px;

    /* height: 100%; */

    margin: 0 auto;
    border-top: solid 8px #6cc6c4;

    /* line-height: 100%; */

    word-break: break-all;
}

/* ---------------ヘッダー--------------- */
.header-wrapper {
    height: 200px;
}

.header-wrapper img {
    margin: 30px 0px;
}

.contact {
    float: right;
}

.explanation {
    margin: 0 auto;
    padding-top: 10px;
    font-size: 12px;
}

.tel {
    height: 40px;
    margin: 0 auto;
    padding: 10px 0 0 30px;
    font-size: 26px;
    background: url(../images/bgTel.png) left center no-repeat;
}

.reservation {
    font-size: 11px;
    text-align: left;
    font-weight: normal;
    margin-top: 0;
    padding: 5px 5px 5px 13px;
    border: solid 1px#D6D6D6;
}

.day {
    color: red;
    padding-left: 7px;
}

/* -------------------- メニューナビ ---------------------------- */
.navi {
    color: white;
    font-size: 14px;
    border-radius: 7px;
    position: absolute;
    border: solid 1px #6cc6c4;
    height: 70px;
    width: 919px;
    background-image: linear-gradient(
        rgb(156, 227, 225) 0%,
        rgb(108, 198, 196) 100%
    );
}

.navi ul {
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
}

.navi ul li {
    margin: 0;
    padding: 0;
    float: left;
    width: 181.8px;
    list-style: none;
    height: 70px;
    cursor: pointer;

    border-left: 1px solid #99e1df;
    border-right: 1px solid #71c9c7;
}

.navi ul li:hover {
    background-image: linear-gradient(
        rgb(108, 198, 196) 0%,
        rgb(156, 227, 225) 100%
    );
}

.navi a {
    display: block;
    padding: 20px 0px 18px 0px;
    color: white;
    text-decoration: none;
}

.navi ul li .titleJa {
    text-align: center;
    display: block;
    margin: 0px;
    padding: 0px;
}

.navi ul li .titleEn {
    display: block;
    margin: 0px;
    padding: 0px;

    font-size: 10px;
    text-align: center;
}
コード
```

⚫︎responsive.css ここから

```@media screen and (max-width: 768px) {
    *,
    *:before,
    *:after {
        box-sizing: border-box;
    }

    body {
        width: 100%;
    }

    .wrapper,
    .header-wrapper,
    .contents-wrapper,
    footer {
        width: 100%;
    }

    .header-wrapper {
        height: auto;
    }

    .header-wrapper img {
        vertical-align: bottom;
    }

    .navi {
        width: 100%;
        height: 140px;
        flex-direction: column;
    }

    .navi ul {
        flex-wrap: wrap;
    }

    .navi ul li {
        float: none;
    }
}

コード
```


⚫︎試したこと
width: 100%や box-sizing: border-box　position: relative absolute など試しましたが、原因がわかりませんでした。

⚫︎補足情報（FW/ツールのバージョンなど） サイト表示はChromeで、コーディングはVScode、MacBookを使用しています。!

行動規範の内容に同意します

回答1件

ベストアンサー

差分だけ

css
1.navi {
2    /*height: 70px;*/
3}
4.navi ul {
5    display: flex;
6}
7.navi ul li {
8    /*float: left;*/
9    width: 50%;
10}
11.navi {
12    /*height: 140px;*/
13    /*flex-direction: column;*/
14}