cssのプレビューが崩れます

CSSのプレビューが崩れるます###

htmlの時は普通に表示されるのですがコーティングするとご挨拶のところを下に下げたいのですが、メニューバーに入ってしまいます。
初歩的な質問ですいません。

エラーメッセージ

###該当のソースコード

html
1<!doctype html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>sample</title>
6    <link rel="stylesheet" href="../css/index.css">
7</head>
8<body>
9
10    <h1 id="header">sample</h1>
11
12	<div class="index">
13		<div class="nav">
14			<ul>
15				<li><a href="#header">TOP</a></li>
16				<li><a href="about.html">方針</a></li>
17				<li><a href="cost.html">費用</a></li>
18				<li><a href="access.html">アクセス</a></li>
19				<li><a href="ask.html">お問い合わせ</a></li>
20			</ul>
21		</nav>
22	</div>
23	
24	<div id="main">
25	    <div id="TOP">
26	    	<p>
27		    	<h2>ご挨拶</h2>
28		    	sample<br>
29		    	samplesamplesamplesample
30	    	</p>
31				
32	    </div>
33	</div>   
34</body>
35</html>

css
1body{
2	max-width:  900px;
3	margin: auto;
4}
5
6h1{ 
7    filter:alpha(opacity=70);
8    -moz-opacity: 0.7;
9    opacity: 0.7;
10	font-size: 50px;
11	padding: 40px;
12	color: white;
13	background: #eda789;
14	width: 1000px auto;
15	height:100px auto;
16	text-align: center;
17	box-shadow: 6px 6px 2px #e1a181;
18	user-select: none;
19	-moz-user-select: none;
20	-webkit-user-select: none;
21	-ms-user-select: none;
22}
23
24
25
26li{
27	float: left;
28	font-size: 25px;
29	width: 1000px auto;
30	height:100px auto;
31	text-align: center;
32	list-style: none;
33	padding-top:33px;
34	padding-bottom:33px;
35	padding-left:20px;
36	padding-right:20px;
37}
38
39.main{
40	float: left;
41	padding: 100px 80px;
42}
43.TOP{
44	width:50px;
45