nav部分のboderがはみ出してしまいます。

Question

⚫︎前提・実現したいこと
見本サイト（https://haniwaman.com/sample/part3/template_08/index.html）のように、nav部分のboderのはみ出しを改善したいです。
お手数ですが、ご教授願います。

⚫︎発生している問題
nav部分のboderが、はみ出してしまいます。

⚫︎該当のソースコード

⚫︎HTML
<div class="navi">
                    <ul>
                        <li>
                            <a href="index.html" class="first"></a>
                            <span class="titleJa">トップページ</span>
                            <span class="titleEn">HOME</span>
                        </li>
                        <li>
                            <a href="clinic.html"></a>
                            <span class="titleJa">医院紹介</span>
                            <span class="titleEn">CLINIC</span>
                        </li>
                        <li>
                            <a href="service.html"></a>
                            <span class="titleJa">診療案内</span>
                            <span class="titleEn">SERVICE</span>
                        </li>
                        <li>
                            <a href="staff.html"></a>
                            <span class="titleJa">院長・スタッフ紹介</span>
                            <span class="titleEn">STAFF</span>
                        </li>
                        <li>
                            <a href="access.html"></a>
                            <span class="titleJa">アクセス</span>
                            <span class="titleEn">ACCESS</span>
                        </li>
                    </ul>    
                    </div>
                </div>



⚫︎CSSここから

.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 li {
    margin: 0;
    padding: 0;
    float: left;
    width: 170px;
    list-style: none;
    height: 70px;
    cursor: pointer;

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

.navi ul li + li {
}

.navi ul li a {
}

.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;
}

⚫︎試したこと
navやul li などのpaddingやmarginを　０　にしてみたのですが、解決しません。
Chrome DevTools で　paddingなど確認したのですが、原因がわかりませんでした。

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

Answer 1

ulのmarginが邪魔してると思います

ul {
  margin-top:0;
}
```。

Comments

[pontyan]

改善しました。有難うございます。なかなかうまくいかずずっと試行錯誤していたので、本当に助かりました！
有難うございます。感謝です。