When working on my responsive css I do not get the thin header/navigation bar. In fact it gets wider. Can someone help with my code?

Here is the responsive portion:

@media screen and (min-width: 480px) { /================================ TWO COLUMN LAYOUT =================================/ #primary{ width: 50%; float: left; }

#secondary{
    width: 40%;
    float: right;
}

/*================================
 PAGE: PORTFOLIO
=================================*/

#gallery li{
    width: 28.3333%;
}

#gallery li:nth-child(3n){
    clear: left;
}

 /*================================
 PAGE: ABOUT
=================================*/

.profile-photo{
    float: left;
    margin: 0 5% 80px 0;
}

}

@media screen and (min-width: 660px){

/*================================
 HEADER
=================================*/

nav{
    background: none; 
    float: right; 
    font-size: 1.125em; 
    margin-right: 5%; 
    text-align: right; 
    width: 45%; 
}

#logo{
    float: left;
    margin: 5%;
    text-align: left; 
    width: 45%; 
}

h1 {
    font-size: 2.5em; 
}

h2{
    font-size: 0.825em; 
    margin-bottom: 10px; 
}

header{
    border-bottom: 5px solid #599a68; 
    margin-bottom: 60px; 
}

}

Here is my main css:

/*================================ Colors used in this website:

E4DBBF -- Tan/Grey

DC5B21 -- Red Orange

70AB8F -- Green

383127 -- Black

32673F -- Darker Green

599a60 -- Dark Green

==================================*/

/================================ GENERAL ==================================/

body{ font-family: 'Roboto', sans-serif; }

wrapper{

max-width: 940px; 
margin: 0 auto; 
padding: 0 5%; 

}

a{ text-decoration: none; }

img{ max-width: 100%; }

h3{ margin: 0 0 1em 0;

}

/================================ HEADING =================================/ header{ float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo{

text-align: center; 
margin: 0;

}

h1{ font-family: 'Roboto', sans-serif;
margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 1em; }

h2{ font-size: .75em; margin: -5px 0 0; font-weight: normal; }

/================================ NAVIGATION =================================/

nav{ text-align: center; padding: 10px 0; margin-top: 20px; }

nav ul{ list-style: none; margin: 0 10px; padding: 0; }

nav li{ display: inline-block; }

nav a{ font-weight: 800; padding: 15px 10px; }

/================================ COLORS =================================/ header{ background: #70AB8F; border-color: #E4DBBF; }

a { color: #70AB8F; }

h1, h2{ color: #fff; }

nav{ background: #599a60; }

nav a, nav a:visited { color: #fff; }

nav a.selected, nav a:hover { color: #32673F; }

/================================ BODY ==================================/

/* Site body */ body{ background: #fff; color: #E4DBBF; }

/================================ PAGE: PORTFOLIO =================================/

gallery{

margin: 0; 
padding: 0; 
list-style: none; 

}

gallery li{

float: left; 
width: 45%; 
margin: 2.5%;
background-color: #DC5B21; 
color: #bdc3c7;

}

gallery li a p{

margin: 0; 
padding: 5%; 
font-size: 0.75em; 
color: #E4DBBF; 

}

/================================ PAGE: ABOUT =================================/ .profile-photo{ display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

/================================ PAGE: CONTACT =================================/ .contact-info{ list-style: none; padding: 0; margin: 0; font-size: 0.9em; }

.contact-info a{ display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px; }

.contact-info li.email a{ background-image: url('../img/mail.png'); }

.contact-info li.twitter a{ background-image: url('../img/twitter.png'); }

.contact-info li.phone a{ background-image: url('../img/phone.png'); }

.contact-info li.github a{ background-image: url('../img/github.png'); }

/================================ FOOTER =================================/

footer{ clear: both; font-size: 0.75em; text-align: center; padding-top: 50px; color: #ccc; }

.social-icon{ width: 20px; height: 20px; margin: 0 5px; }