コンテンツ幅＞画面幅　となる場合のヘッダーの固定について

前提・実現したいこと

PHPを使用してwebページを製作しています。
ページには固定ヘッダーと、複数のテーブルを表示しています。テーブルの幅は全て同一で、表示内容によって700~1000pxあたりとなります。
テーブルの幅はwidthを直接指定して、固定レイアウトとしています。

スマートフォン、デスクトップでも固定ヘッダーは画面上部に固定し、テーブルを含めた表示内容はスクロールして閲覧できることが理想です。

発生している問題・エラーメッセージ

Chromeの開発者ツールのデバイスモード、またはandroidスマートフォンの場合のみ、上記のページでは固定ヘッダーが「画面の幅」ではなく「テーブルの幅」まで広がってしまいます。

なお、以下の場合にはヘッダーが画面上部に固定されています。
・Edgeの開発者ツールでのモバイル表示
・iPhone実機
・iPad実機

iPhone、iPadの場合は拡大/縮小も可能です。

該当のソースコード

同様の条件を再現したコードになります。
また、このコードを再現したテストサイトが以下になります。

http://navi-test.ready.jp/navi-test.php

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>サンプルサイト</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<style>
body{
    margin:0;
}
#nav{
    position:fixed;
    top:0;
    left:0
    border: 1px solid black;
    width: 100%;
    background-color:#b7b7b7;
    height:50px;
}
#nav ul li{ 	
    display: inline;
    width:33%;
 }
#main{
    margin:50px 8px 0 8px;
}
.sample-table{
    margin-bottom:50px;
}
</style>
</head>

<body>

<div id="nav">
    <ul>
        <li><a href="">ホーム</a></li>
	<li><a href="">メニュー1</a></li>
	<li><a href="">メニュー2</a></li>
    </ul>
</div>

<div id="main">
    <h1>サンプルサイト</h1>

    <?php 
    for($i = 1; $i <= 6; $i++){
	echo "
	<div class='sample-table'>
	    サンプルテーブル{$i}
	    <table style='width:700px;border:1px solid black'>
		<tr><td>サンプル{$i}-1</td></tr>
		<tr><td>サンプル{$i}-2</td></tr>
		<tr><td>サンプル{$i}-3</td></tr>
		<tr><td>サンプル{$i}-4</td></tr>
	    </table>
	</div>";
    }
    ?>
</div>
</body>

<script>
$(function() {
    console.log('screen.width: '+window.screen.width);
    console.log('innerWidth: '+window.innerWidth); //
    console.log('navWidth: '+ $('#nav').width());
    console.log('$window: '+$(window).width());
    console.log('$body: '+$('body').width());
    console.log('$html: '+$('html').width());
});
</script>