ipadminiタブレットのカラム落ち

古いテーマを使用しておりますが、最近に、iPadminiにて確認をいたしましたところ、
PCで正常に見れております、メインメニューの一番右側のひとつだけ、どうしても、カラム落ちして2段になってしまいます。

タブレット用に、下記のソースから、修正をかけていきましたら、さらに、各メニューが立て並びになってしまい、どこを修正するとよいのかわからなくなってしまいました。
もし、おわかりの方がいらっしゃいましたら、ぜひ、おおしえいただければ幸いです。
初歩的なことがわかっていませんかもしれず、申し訳ございません。

下記に、仕様状況もすこし記載いたしました。
どうぞ　よろしくお願い申し上げます。

☆タブレット用にいれたCSS
/* add ===============================================
画面の横幅が768pxまで（タブレット用・スマホ用）
===============================================*/
@media screen and (max-width: 768px){

.navigation {
color: #888;
font-size: 12px;
line-height: 18px;
overflow: hidden;
}
.navigation a:link,
.navigation a:visited {
color: #888;
text-decoration: none;
}
.navigation a:active,
.navigation a:hover {
color: #ff4b33;
}

#access {
background-image:url(http://www.holistic-kikou.com/wp-content/themes/twentyten/images/bg_navi_wh.jpg); /*メインメニュー　背景イメージ*/
display: block;
float: left;
margin: 0 auto;
width: 100%;
/*add*/
border-bottom:#aaa 1px solid;
border-top:#aaa 1px solid;
}

#access .menu-header,
ul.menu {
font-size: 14px; /*13px*/
margin-left: 0;
width: 100%;
border-right: #B9DAEA 1px solid;
}

#access .menu-header ul,
ul.menu {
list-style: none;
margin: 0 ;
/*add*/
margin-left:0;
border-right: #B9DAEA 1px solid;
white-space:nowrap;
}
#access .menu-header li a,
ul.menu li a{
float: left;
position: relative;
/*add*/
/* border-right: #B9DAEA 1px solid; */
border-left: #B9DAEA 1px solid;
height: 38px;
padding: 0 5px;
padding-left:5px;
padding-right:5px;
width: 150px;
}

#access a {
color: #356BC6; /*#fff*/ /*メインメニュー　文字色*/
display: block;
line-height: 38px;
padding: 0 20px 0 20px; /*各メインメニューの左右の余白幅 0 21px 0 20px; 0 9px 0 8px; タブレット　2623行あたり*/
text-align:center;
text-decoration: none;
/*add*/
font-weight:bold;
white-space: nowrap; /*これで、メニュー、サブメニューの改行がなくなった*/
width: 150px;
}
}

●テーマの情報(名称、入手先 URL、バージョン)　：　twentyten
●PHP、MySQL のバージョン　：　5.6
●サーバー環境(ホスティングサービス名、OS、ウェブサーバー等)　：　lolipop
●ブラウザとそのバージョン　：　ipadmini4　Safari（PCでは正常に見れます。）

ヘルプの必要なページ: [リンクを見るにはログイン]