私のウェブサイトのナビゲーションはすべてのコンピューターで正しくレンダリングされますが、モバイルデバイス（iOS）では切り捨て/ラップされます。
関連するCSSは次のとおりです。
.custom .menu {
margin-top: 1.25em;
margin-left: 288px;
width: 442px;
}
.custom .menu a {
font-size: 1.4em;
font-weight: bold;
text-align: left;
}
関連するHTMLは次のとおりです。
<div class="menu-main-menu-container"><ul id="menu-main-menu" class="menu"><li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-19"><a href="http://rainleader.com/">Home</a></li>
<li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="http://rainleader.com/about/">About</a></li>
<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="http://rainleader.com/services/">Services</a></li>
<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="http://rainleader.com/blog/">Blog</a></li>
<li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="http://rainleader.com/contact/">Contact</a></li>
</ul></div>
外観は次のとおりです（PC / Mac）：
しかし、iOSでは、「連絡先」は末尾が切り取られ、「ホーム」の下にプッシュされます。つまり、メニューは「ブログ」で終わり、「連絡先」のみを含む2行目があります。
の値を大きくするとwidth、iOSの問題を解決せずに、PC/Macのメニューの最後にある下の境界線が延長されます。
上記の延長された下の境界線に気づきましたが、iOSではまだ「連絡先」を切り捨て/折り返しています。
私は何が間違っているのですか？または、これをどのように修正する必要がありますか？