listのリセットかけているのに余白がついてしまう件について

html1,css1について質問です。
初歩的な部分で大変恐縮なのですがlistの余白が取れずに困っています。
一応、ulとliのpadding,marginはリセットかけているのですが、padding,marginがついている状態になってしまいます。
クローム検証の数値面では足されておりません。
すみませんがわかるかたいましたらご回答よろしくお願いします。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<style>
	html,body,ul,li{
		padding:0;
		margin:0;
	}

	
	.box-main{
		width:400px;
		height:400px;
		background-color:blue;
	}
	.box1{
		width:200px;
		height:200px;
		background-color:yellow;
	}
	.box2{
		width:200px;
		height:200px;
		background-color:red;
	}
	.box3{
		width:200px;
		height:200px;
		background-color:green;
	}
	.box4{
		width:200px;
		height:200px;
		background-color:pink;
	}
	.box5{
		width:200px;
		height:200px;
		background-color:lightcoral;
	}
	ul.nav{list-style:none;}
	li
</style>
</head>

<body>
 <div id='container'>
 <ul class='nav'>
	<li><div class='box-main'><li></div>
 <li><div class='box1'><li></div>
 <li><div class='box2'><li></div>
 <li><div class='box3'><li></div>
 <li><div class='box4'><li></div>
 <li><div class='box5'><li></div>
	</ul>
	</div>
<script>
</script>
</body>
</html>