Media Queries all belly up

See more:

CSS3

I'm not sure what I'm doing wrong.

My media queries display different results depending on whether I'm viewing the results via a test tool like Matt Kersley's online test tool http://mattkersley.com/responsive or via my actual device.
None of my media queries is responding properly. Any ideas?
Thanks.

[EDIT - OP code from solution]
The problem is primarily with the menu. I'm trying to centre up the menus but the entire menu is slightly left justified on some devices i.e. Macbook Pro Retina, and centre justified on an old DELL LCD 1024 x 768.
Here is the code:

      header nav{
	/*background:#333;*/
	width:99%;
	height:10%;
	margin:auto;
	border: 1px solid red;
	border-radius:3px;
	-webkit-border-radius:3px; /*webkit browsers*/
	-moz-border-radius:3px;/*Mozilla browsers*/
	overflow:hidden;

      header nav ul{
	list-style:none;
	padding:0 4%;
	/*margin:0 11.5%;*/
	margin: 0 auto;
	display:inline;
}
}

[/EDIT]