#wrapper { 
	width: 90%; 
	margin-left: auto;
	margin-right: auto;
}


<link href="mediaqueries.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width; initial-scale=1.0">

@media screen and (max-width: 960px) {

}

@media screen and (max-width: 960px) {
	#container, footer {
		width: 758px;
	}
	
	#content {
		margin: 0 20px 0 0;
	}
	
	#sidebar {
		width: 212px;
	}
		#sidebar section {
			clear: left;
		}
		#sidebar #search #searchbar {
			width: 152px;
		}
}

@media screen and (max-width: 758px) {
	#container, footer, #sidebar {
		width: 524px;
	}
	
	header nav {
		clear: left; float: none; overflow: hidden;
	}
		header nav li {
			width: auto; margin: 0 25px 0 0;
		}
	
	header {
		margin: 0 0 44px 0;
	}
	
	header h1 {
		margin: 0 0 24px 0;
	}
	
	#sidebar section {
		float: left; clear: none;
	}
		#sidebar #social {
			margin: 0 20px 47px 0;
		}

	#sidebar #search #searchbar {
			width: 464px;
	}
}

@media screen and (max-width: 524px) 
{
	#container, footer, #sidebar, #content 
{
		width: 292px;
	}
	
	#content article h2 {
		font-size: 24px;
	}
	
	#content .postinfo li {
		margin: 0 10px 0 0;
	}
	
	#sidebar #social {
			margin: 0;
		}
		
	#sidebar #search #searchbar {
		width: 230px;
	}
}

article, aside, figure, footer, header, hgroup,
menu, nav, section 
{ 
display:block; 
}

 
body {
	font-family: Verdana, Geneva, dans-serif, Calibri;
	h1: 2em;
	h2: 1em;
	p: 0.8em;
	p1: 0;5em;
}
header {
	height: 50px;
	width: 90%;
	background: #773E77;
	
	align: center;
}

header img {
	margin: auto;
	text-align: center;
}

header h1 {
	font-size: 2em;
	color: white;
	text-align: center;
}

#container {
	float: left;
	width: 100%;
}


div#content {	
	float: left;
	width: 100%;
	text-align: left;
	display: block;
	text-decoration: none;
	
	font-family: arial, verdana, serif;
	background: white;
	color: #5F94DC;
	font-weight: normal;
	margin-top: 10px;

}

table, th, td 
{
	margin: 5px;
	padding: 5px;
	border-spacing: 5px;
}