css メディアクエリーだけが効かない

cssのメディアクエリー部分だけが効きません、原因が良く分かりません
sublime text2を使用して,chromeで見ています。

<responsive.html>

<!doctype html>
<html lang="jp">
<head>
	<meta charset="UTF-8">
	<title>Navigation Demo</title>
	<link rel="stylesheet" href="responsive.css">
</head>
<body>
	<header>
		<h1>Resposive</h1>
	</header>
	<nav>
		<div class="handle">Menu</div>
		<ul>
			<a href="#"><li>Home</li></a>
			<a href="#"><li>About</li></a>
			<a href="#"><li>Blog</li></a>
			<a href="#"><li>shop</li></a>
			<a href="#"><li>Gallery</li></a>
			<a href="#"><li>Contact</li></a>
		</ul>
	</nav>
	<section>
		ヤクザとは、組織を形成して暴力を背景に職業的に犯罪活動に従事し、収入を得ているものを言う。この偏倚（へんい）集団を特徴づける要因の一つに集団内部の「親分子分」の結合がある。また下っ端に該当する場合は「チンピラ」と称される。
大辞泉は「やくざ」について次の2通りの説明を示す。[1]
役に立たないこと。価値のないこと。また、そのものや、そのさま。「―に暮らす」「―な機械」「―仕事」
ばくち打ち・暴力団員など、正業に就かず、法に背くなどして暮らす者の総称。「―渡世」
「暴力団」も参照
「やくざ」研究の古典的名著とされる岩井弘融の『病理集団の構造』の序説で「親分乾分（岩井は故意に、乾としている。読みは「こぶん」で同じ）」の関係は民俗学（柳田國男他）や社会学（川島武宜他）において説明されるところのオヤカタ・コカタの関係と共通の社会的基盤を持つと説明している。
戦後に来日したニューヨーク・ポストの特派員ダレル・ベリガンは、その著作で有名な『やくざの社会』の中で「日本の家族は与太者の集まりであり、家族の長は与太者の長である」という文から始まる、日本社会の内部構造についての報告をまとめている。また、かつて横浜の塚越一家に所属した右翼活動家の野村秋介は、「やくざ」について説明する際に「やくざとは職業ではなく」、「実業家、ジャーナリスト、政治家にもやくざは存在する」と発言したが（出典：『暴力団新法』）これも個人間の繫がりとして絶対的権威（親分）と追随者（子分）の関係が広く社会で見られる点を示唆するものである。ただし、その上で「やくざ」を特徴づけている別の内部要因として、集団の共通目的、成立の社会的条件、存続のための経済的活動、社会的価値基準から逸脱した副次文化等がある。ジャーナリストの朝倉喬司は明治の自由民権運動と「やくざ」の関連を指摘する一方で現代の制度的空間や価値基準との関連において「暴力団」と呼ばれるとしている（出典：『ヤクザ』）。
	</section>	
</body>
</html>

<responsive.css>

body{
	margin:0;
	padding:0;
	font-family: sans-serif;
}
header{
	background:#00795f;
	width:100%;
	padding:40px 0;
	color:white;
	text-align: center;
}
a{
	text-decoration: none;
	color:inherit; /*継承するって意味、ここではwhite*/
}
nav ul{
	background-color: #43a286;
	overflow: hidden;
	color:white;
	padding:0;
	margin:0;
	text-align: center;
	-webkit-transition: max-height 0.4s;
	-ms-transition: max-height 0.4s;
	-moz-transition: max-height 0.4s;
	-o-transition: max-height 0.4s;
	transition: max-height 0.4s;

}
nav ul li{
	display:inline-block;
	padding:20px;
}
nav ul li:hover{
	background-color: #399077;
}
section{
	line-height: 1.5em; /*文字間の空間*/
	font-size: 0.9em;
	padding: 40px;
	width:75%;
	margin:0 auto;
}
.handle{
	width:100%;
	background: #005c48;
	text-align: left;
	box-sizing:border-box;
	padding: 15px 10px;
	cursor:pointer;
	display: none;
}
@media screen and(max-width: 580px){
	nav{
		max-height: 0;
	}
	.showing{
		max-height: 20em;
	}
	nav ul li{
		box-sizing:border-box;
		width:100%;
		padding:15px;
	}
	.handle{
		display: block;
	}
}