リスト横並びのメニューのアンドロイドでの隙間

質問

スマホ用のメニューを作成しています。
とりあえず、シンプルなメニューを作っているのですが、viewportを入れると画面を横に回転した際に右端に余白が生じてしまいます。
ぴったり収まるように20%ずつ5つのメニューとしています。
解決する方法はあるでしょうか？

<style>
body{
margin:0;
padding:0;
}

.globalnavi{
margin: 0;
padding: 0;
width: ***;
}

.globalnavi ul{
list-style-type: none;
width: 100%;
margin: 0 auto;
padding: 0;
}

.globalnavi li{
float: left;
width: 20%;
margin: 0;
padding: 0;
}

.globalnavi a{
text-align: center;
display:block;
padding: 0.5em 0;
width: 100%;
background-color: black;
color: white;
}

.globalnavi a:hover{
background-color: red;
color: white;
}
</style>

<nav>
<ul class="globalnavi">
<li><a href="#">Home</a></li>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>
</nav>

回答No.1

ORUKA1951

＞スマホ用のメニューを作成しています。
＞viewportを入れると
　まず、ここが問題ですよ。
　そもそもHTMLでウェブページを作成する最大の目的は
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
　HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。 もし【相互運用性確保の】努力が成されなければ、Webは互換性のないフォーマット毎に分け隔てられた世界に分割され、すべての関係者にとっての商業的可能性が減少することとなるであろう、大きなリスクを負うこととなる。
・・・【中略】・・・
　HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より

　PC用もスマホ用も、mediaタイプはscreen( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/types.html#type-media-descriptors )ですから、まずリキッドで作成し、それで足りない部分をmediaqueryなどを使ってカバーするのが常道です。

＞.globalnavi ul{
と書かれていますが、CSS2以降は本来は基点となるセレクタから書き始めます。ただし、「全称セレクタが単体セレクタの唯一の構成要素でない場合、"*"を省略してよい。( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html#universal-selector )」ですので、.globalnaviの場合は、*(全称セレクタ)が省略されているとみなされます。
　後方互換のために、それで有効ではあるのですが、例えば、同じclass名を他の要素にもつけたいときなど、後々メンテナンスするときなどに困ります。
div.header div.nav{}
div.section div.nav{}
div.footer div.nav{}
　とかできるでしょう。

お待たせしました。本題です。HTML5として書くと、
(header内のnavはサイトマップだと分かっているのでしたらclass名をつける必要はない)
(インデントは全角スペースに置き換えてあります。)
(当然ですが背景黒、文字白はscreenにしか適用されません。)

<header>
　<h1>タイトル</h1>
　<nav>
　　<ul>
　　　<li><a href="/home">Home</a></li>
　　　<li><a href="/menu1">menu1</a></li>
　　　<li><a href="/menu2">menu2</a></li>
　　　<li><a href="/menu3">menu3</a></li>
　　　<li><a href="/menu4">menu4</a></li>
　　</ul>
　</nav>
</header>

<style media="screen">
<!--
body,html{margin:0;padding:0;}
header,section,footer{
width:100%;min-width:470px;max-width:1000px;
position:relative;
margin:0 auto;padding:5px;
}
header h1{margin-top:40px;}
header nav ul,header nav ol li{
list-style:none;
margin:0;padding:0;
text-align:center;
line-height:30px;
}
header nav ul{
width:100%;
position:absolute;
top:0;left:0;
font-size:0;
}
header nav ul li{
font-size:16px;
position:relative;
display:inline-block;
width:20%;height:30px;
}
header nav ul li a{
display:block;
margin:0.5px:width:auto;height:auto;
}
/* 分かりやすいように色分け */
body{background-color:gray;}
header,section,footer{background-color:black;color:white;}
a:link{color:yellow;}
a:visited{color:maroon;}
a:hover,a:focus{color:red;background-color:yellow;}
a:active;{color:lime;}
-->
</style>
<style media="print">
<!--
/* 印刷用スタイル */
-->
</style>
<style media="handheld">
<!--
/* フィーチャーホン(携帯電話用) */
-->
</style>

補足

ORUKA1951さん
独学でやっているので、根本的な点までご指摘くださり、ありがとうございます。
いろいろとお聞きしたい点があるのですが、とりあえず、このままでアンドロイドで表示させた場合、width:20%と指定してあるのに、メニューが一行に収まりません。
なぜでしょうか？