CSS media query not overriding original styling - responsive-design

Question

I am so sorry if this has been answered, but I've looked at tens of threads for over an hour and nothing seems to be addressing my issue.
I'm working on a project for school. The instruction I'm stuck on states: Code a media query for the screen type that checks that the viewport width is 959 pixels or less. Within this media query, reduce the font size for the h1 element in the section to 135%, and reduce the font size for the h2 elements in the section and the aside to 120%.
So, I have coded a media query that does just this, as you can see toward the bottom of my code. I noted that the syntax highlighting doesn't apply in Notepad++ because media queries aren't recognized (that one I did figure out on a thread!) But that same thread stated that the media query would still work in my browser, and that is the issue. It is not working. When I look at it with developer tools in Chrome, my formatting for my media query is actually being overridden by my original styling. I've changed the order of my meta tag in the head on my HTML, and I've moved the query to the top and bottom of my CSS. Nothing is working. I am hoping someone can tell me what the issue is??? Please!
/* styles for 960px and above */
/* the styles for the elements */
* {
margin: 0;
padding; 0;
}
html{
background-color: white;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
width: 99%;
max-width: 960px;
margin: 0 auto;
border: 3px solid #931420;
background-color: #fffded;
}
/* the styles for the header */
header {
border-bottom: 3px solid #931420;
padding: 1.5em 0em 2em 0em;
background-image:
-webkit-linear-gradient(30deg, #f6bb73 0%, #f6bb73 30%, white 50%, #f6bb73 80%, #f6bb73 100%);
background-image:
linear-gradient(30deg, #f6bb73 0%, #f6bb73 30%, white 50%, #f6bb73 80%, #f6bb73 100%);
}
header img {
float: left;
padding: 0 3.75%;
}
header h2{
font-size: 170%;
color: #800000;
}
header h3{
font-size: 130%;
font-style: italic;
}
.shadow {
text-shadow: 1px -1px 2px #800000;
}
/* the styles for the navigation menu format */
#nav_menu ul{
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
}
#nav_menu ul li{
float: left;
width: 20%;
}
#nav_menu a {
display: block;
text-align: center;
padding-top: 1em;
padding-bottom: 1em;
background-color: #800000;
color: white;
font-weight: bold;
text-decoration: none;
}
.current{
color: yellow;
}
/* the styles for the navigation menu operation */
#nav_menu ul ul{
display: none;
position: absolute;
top: 100%;
}
#nav_menu ul li:hover > ul {
display: block;
}
#nav_menu > ul::after {
content: "";
display: block;
clear: both;
}
#nav_menu ul ul li{
float: none;
width: 192px;
}
/* the styles for the section */
section{
width: 65.625%;
float: right;
padding: 0 2.5% 2.5% 2.5%;
}
aside {
float: right;
width: 26.875%;
padding: 0 0 20px 2.5%;
}
aside h2{
font-size: 130%;
color: #800000;
padding: .5em 0 .25em 0;
}
aside h3{
font-size: 105%;
padding: 0 0 .25em 0;
}
aside img{
padding: .5em 0 1em 0;
}
aside a:focus{
font-style: italic;
}
aside a:hover{
font-style: italic;
}
main {
clear: left;
padding: 0;
}
section h1{
font-size: 150%;
padding: .5em 0 .25em 0;
margin: 0;
}
article{
padding: .5em 0 .5em 0;
border-top: 2px solid #800000;
border-bottom: 2px solid #800000;
}
article img{
float: right;
border: 1px solid black;
margin: 0 0 2.5em 1em;
}
section h2{
font-size: 130%;
color: #800000;
padding: .5em 0 .25em 0;
}
section h3{
font-size: 105%;
padding: 0 0 .25em 0;
}
section a:focus{
font-style: italic;
}
section a:hover{
font-style: italic;
}
section p{
padding: 0 0 .5em 0;
}
section blockquote{
padding: 0 2em;
font-style: italic;
}
section ul{
padding: 0 0 .25em 1.25em;
}
section li{
padding: 0 0 .35em 0;
}
/* the styles for the footer */
footer{
padding: 0;
margin: 0;
clear: both;
}
footer p{
text-align: center;
background-color: #931420;
color: white;
padding-top: 1em;
padding-bottom: 1em;
}
/* styles for 959px or less */
#media only screen and (max-width: 959px;){
body section h1{
font-size: 130%;
}
body section h2, aside h2{
font-size: 120%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>San Joaquin Valley Town Hall</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<img src="images/town_hall_logo.gif" alt="Town Hall Logo" height="80">
<h2>San Joaquin Valley Town Hall</h2>
<h3>Celebrating our <em class="shadow">75<sup>th</sup></em> Year</h3>
</header>
<nav id="nav_menu">
<ul>
<li><a class="current" href="index.html">Home</a></li>
<li>Speakers</li>
<li>Luncheons</li>
<li>Tickets</li>
<li>About Us
<ul>
<li>Our History</li>
<li>Board of Directors</li>
<li>Past Speakers</li>
<li>Contact Information</li>
</ul>
</li>
</ul>
</nav>
<main>
<section>
<h2>Our Mission</h2>
<p>San Joaquin Valley Town Hall is a non-profit organization that is run by an all-volunteer board of directors. Our mission is to bring nationally and internationally renowned, thought-provoking speakers who inform, educate, and entertain our audience! As one or our members told us:</p>
<blockquote>“Each year I give a ticket package to each of our family members. I think of it as the gift of knowledge...and that is priceless.”</blockquote>
<h1>Speaker of the Month</h1>
<article>
<h2>Fossil Threads in the Web of Life</h2>
<br><img src="images\sampson_dinosaur.jpg" alt="Sampson Dinosaur" max-width="40%" min-width="150px">
<h3>February 15, 2012<br>
Scott Sampson</h3>
<br>
<p>What's 75 million years old and brand spanking new? A teenage Utahceratops! Come to the Saroyan, armed with your best dinosaur roar, when Scott Sampson, Research Curator at the Utah Museum of Natural History, steps to the podium. Sampson's research has focused on the ecology and evolution of late Cretaceous dinosaurs and he has conducted fieldwork in a number of countries in Africa.
<br>
Read more. <b>Or meet us there!<b></p>
</article>
<h2>Our Ticket Packages</h2>
<ul>
<li>Season Package: $95</li>
<li>Patron Package: $200</li>
<li>Single Speaker: $25</li>
</ul>
</section>
<aside>
<h2>Guest speakers</h2>
<h3>October</h3>
Jeffrey Toobin<br>
<img src="images/toobin75.jpg" alt="Jeffrey Toobin" height="75">
<h3>November</h3>
Andrew Ross Sorkin<br>
<img src="images/sorkin75.jpg" alt="Andrew Ross Sorkin" height="75">
<h3>January</h3>
Amy Chua<br>
<img src="images/chua75.jpg" alt="Amy Chua" height="75">
<h3>February</h3>
<a href="speakers\sampson.html">Scott Sampson<a/><br>
<img src="images/sampson75.jpg" alt="Scott Sampson" height="75">
</aside>
</main>
<footer>
<p>© 2015, San Joaquin Valley Town Hall, Fresno, CA 93755</p>
</footer>
</body>
</html>

Answer 1

You have a semicolon here
#media only screen and (max-width: 959px;){
Remove it and it will behave as expected. I don't know Notepad++'s settings, but I recommend getting an editor that highlights minor issues like this. Or just use something like jsfiddle.
There are also numerous issues throughout your HTML and CSS, like unclosed tags, using b instead of strong, your CSS for *'s padding is using a semicolon instead of a colon.