Media queries Mobile does not work

Question

I am making a website, in the Responsive to mobile @media only screen and (max-width: 767px), in the Development of the site I was Reducing the browser to make the style for each break. But by inspecting the browser element and when uploading the site to the server the mobile version is not Working.

*, *:before, *:after {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}

.container {
	width: 1360px;
	margin: 0 auto;
	padding: 0px;
	position: relative;
}

.container:after, .container:before {
	content: " ";
	display: table;
}

.container:after {
	clear: both;
}

.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16,.grid-1-2, .grid-1-4, .grid-1-3, .grid-2-3 {
	float: left;
	margin-left: 10px;
	margin-right: 10px;
}

.grid-1 	{width: 65px;}
.grid-2 	{width: 150px;}
.grid-3 	{width: 235px;}
.grid-4 	{width: 320px;}
.grid-5 	{width: 405px;}
.grid-6 	{width: 490px;}
.grid-7 	{width: 575px;}
.grid-8 	{width: 660px;}
.grid-9 	{width: 745px;}
.grid-10 	{width: 830px;}
.grid-11 	{width: 915px;}
.grid-12 	{width: 1000px;}
.grid-13 	{width: 1085px;}
.grid-14 	{width: 1170px;}
.grid-15 	{width: 1255px;}
.grid-16 	{width: 1340px;}
.grid-1-4	{width: 292px;}
.grid-1-2	{width: 600px;}
.grid-1-3	{width: 425px;}
.grid-2-3	{width: 300px;}
@media only screen and (min-width: 1024px) and (max-width: 1359px) {
.container {
	width: 1024px;
}
.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-1-4 {
	float: left;
	margin-left: 7.5px;
	margin-right: 7.5px;
}
.grid-1 	{width: 44px;}
.grid-2 	{width: 108px;}
.grid-3 	{width: 172px;}
.grid-4 	{width: 236px;}
.grid-5 	{width: 300px;}
.grid-6 	{width: 364px;}
.grid-7 	{width: 428px;}
.grid-8 	{width: 492px;}
.grid-9 	{width: 556px;}
.grid-10 	{width: 620px;}
.grid-11 	{width: 684px;}
.grid-12 	{width: 748px;}
.grid-13 	{width: 812px;}
.grid-14 	{width: 876px;}
.grid-15 	{width: 940px;}
.grid-16 	{width: 1004px;}
.grid-1-4	{width: 236px;}

}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
.container {
	width: 768px;
}
.grid-1		{width: 28px;}
.grid-2		{width: 76px;}
.grid-3		{width: 124px;}
.grid-4		{width: 172px;}
.grid-5		{width: 220px;}
.grid-6		{width: 268px;}
.grid-7		{width: 316px;}
.grid-8		{width: 364px;}
.grid-9		{width: 412px;}
.grid-10	{width: 460px;}
.grid-11	{width: 508px;}
.grid-12	{width: 556px;}
.grid-13	{width: 604px;}
.grid-14	{width: 652px;}
.grid-15	{width: 700px;}
.grid-16	{width: 748px;}
.grid-1-4	{width: 292px;}

}

@media only screen and (max-width: 767px) {
.container {
	width: 300px;
}

.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-1-4 {
	width: 300px;
	margin: 0 0 0px 0;
	float: none;
}
}

Has anyone Ever Experienced this ?