CSS İle Menü Yaparken Taşma Sorunu

<nav>
	<ul>
		<li><a href="#">Menu 1</a></li>
		<li><a href="#">Menu 2</a></li>
		<li><a href="#">Menu 3</a></li>
		<li><a href="#">Menu 4</a></li>
		<li><a href="#">Menu 5</a></li>
		<li><a href="#">Menu 6</a></li>
		<li><a href="#">Menu 7</a></li>
		<li><a href="#">Menu 8</a></li>
	</ul>
</nav>

nav {
	margin: 28px 0 -28px 0;
	width: 100%;
	min-width: 1124px;
	max-width: 1124px;
	height: auto;
}

nav ul li {
	background-color: #049372;
	display: inline-block;
	padding: 16px 26px;
}

nav ul li a{
	font-family: Tahoma, Verdana, Segoe, sans-serif;
	font-size: 30px;
	color: #fff;
}

nav ul li a:hover{
	color: #fff;
}

nav ul li:hover {
	background-color: #F64747;
}

Basar adlı üyeden alıntı: mesajı görüntüle

js çalışması için http://code.jquery.com/jquery-1.10.1.min.js adresindeki kodları bahsettiğin tarzdaki bir siteden sıkıştırıp site dosyalarına dahil ettim site analizi yaptığımda sayfa boyunda js boyutu 90kb gösteriyo du zaten normal boyutu o. Birşey farketmedi yani bende anlamadım baktım olmuyo olmaz olsun javascriptiniz dedim

Benim asıl olayım o değilde şu #media olayını hiç bilmiyorum taşmaması için o verdiğiniz kodu mu kullanmam gerekiyo

@media (max-width: 1024px) {
	nav ul {
		text-align: center;
	}
	nav ul li {
		display: block;
	}
}