Media Query not responding to changing browser size on desktop

My media query just won't work, can anyone see what I've missed? I've tried adding:

!important; after media query css declarations
adding css ancestral specificity to media query css declarations

No luck. I have the meta viewport tag in the header. Here's my html:

<!DOCTYPE html> 
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,700italic' rel='stylesheet' type='text/css' />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link type="text/css" rel="stylesheet" href="css/styles.css"/>
<link rel="stylesheet" href="css/jquery.fadeshow-0.1.1.min.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content="abc" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery/jquery.fadeshow-0.1.1.min.js" type="text/javascript"></script>
<script>
$(function(){
$('#nav').click(function() {
$(this).toggleClass('open');
});
});
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title</title>
</head>

and the css

.container {
 position: relative;
 margin: 0 auto;
 width: 100%;
 max-width: 1024px;
 font-family: "Source Sans Pro", sans-serif;
 font-weight: 400;
 color: #1a1a1a;
 line-height: 150%; 

}
.content {
 position: relative;
 padding: 43% 17% 3%;

}

h1 {
 font-family: "Source Sans Pro", sans-serif;
 font-weight: 700;
 font-size: 2.5em;
 font-style: italic;
 color: #426432;
 text-shadow: 0px 0px 1.3em white, 0px 0px 1.3em white, 0px 0px 1.3em white;
 line-height: 150%;
 text-align: center;
 margin-bottom: 50px;
 margin-left: -15px;
}

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

.content {
  padding: 43% 5% 3%;

 }

 h1 {
     font-size: 1.65em;
     line-height: 150%;
     margin-bottom: 30px;
 }

 .body {
     font-size: 1em;
     letter-spacing: .01em;
     line-height: 150%;
 }
}

Any ideas?

Solution

I could suggest that you add the alternate css (default) to another media query of min-width 501px. This however shouldn't be necessary, I have encountered issues with characters being skipped as they had been the wrong format being copied from websites.

What is happening or not happening? Is nothing changing? I've dealt with this before and it's always a strange issue. So here are some thoughts and examples of CSS behavior.

In CSS we have a hierarchy decided both on how you select an element and on its position within your stylesheet. Take for example the following CSS selectors:

body .test-parent .test-child {
    color: red;
}
body .test-parent .test-child {
    color: blue;
}

The result in this case would return color: blue; as the final style as it is the last read declaration for that elements color value.

However if we declare the following:

body .test-parent-two .test-child-two {
    color: red;
}
body .test-child-two {
    color: blue;
}

Then the final value is color: red;. This caught me off guard and it took me a while to notice the pattern and fix.

The problem here lies in the selectors. A more in-depth selector (longer / includes more in-between children) will override any others as can be seen by this JSFiddle.

Hope that also helps!