adding media query and nav clears entire header when the size goes beyond 660px. So many questions about this issue but

/******************************
Media Queries - CSS Rule
*******************************/
/* */
@media screen and (min-width: 480px) { 

  /*************************
    TWO COLUMN LAYOUT
      ***************************/
  #primary{
    width:50%;
    float:left;
  }

  #secondary{
    width: 40%;
    float:right;
  }
  /*************************
    3x((?)+(2.5+2.5))=100%
      3x=85% => x=28.3333333%
      ***************************/

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

  .profile-photo{
/*    display:inline-block;*/
    float:left;
    margin: 2% 5% 80px 0;

  }

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

  #gallery li{
    width:28.3333%;
  }

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



}
/* 
@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-left:5%;
    text-align:left;
    width:45%;
  }

  h1{
    font-size:2.5em;
  }

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

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

}

<!--body {
  background-color: orange;
} -->

/******************************
GENERAL STYLING
*******************************/

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

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

a {
  text-decoration: none;
}

/* allow the images to fill their parent element*/
img
{
  max-width:100%;  /** fluid image- % is relative element since it will change along with the parent element size or browser size whereas pixels are fixed */
}

h3 {
  margin:0 0 1em 0;
}di


/******************************
HEADER/ING STYLING
*******************************/

header {
  float:left; /* will effect in desktop layout*/
  margin:0 0 30px 0; /* TRBL clock wise - top margin removes */
  padding:5px 0 0 0;
  width:100%;

}


#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0; /* 15 LR, 0 UD*/
  font-size: 1.75em;  /*no LR, UD 1.75 new unit em*/
  font-weight:normal;
  line-height:0.8em;

}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0; <!--top, LR, bottom -->
  font-weight:normal;
}

/******************************
Navigation mob comp
*******************************/

nav {
  text-align:center;
  padding:10px 0; /* TB 0 LR px */
  margin:20px 0 0;
}


nav ul{
  list-style:none; /* remove bullet points */
  margin:0 10px; /* navigation - remove the margins on top and bottom and 10 on LR*/
  padding:0; /* remove padding  */

}

nav li{
  display:inline-block; /* in line with one another and in a row */
}

/*polish navigation and footer */

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

/******************************
FOOTER - MOBILE COMP
*******************************/

footer {
  font-size:0.75em;
  text-align:center;
  clear: both; /*clear around so that footer shows below sepearately*/
  padding-top: 50px;
  color: #ccc;
}

/* polish footer */
.social-icon { /* or also footer a */
  width:20px;
  height:20px;
  margin:0 5px;
}

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

/* remove the margin, padding and bullet points*/
#gallery
{
  margin: 0;
  padding:0;
  list-style:none;/* (Remove bullet points */
}

/* float: position in a special way so image floats on the page to the let or right and the text then flows around the image*/

#gallery li
{
  float:left; 
  width: 45%; /* regardless of size it takes only 45% of width of page 2*45+10(space of 2.5xx2.5 around the image)*/
  margin: 2.5%;
  background-color:#f5f5f5;
  color: #bdc3c7;
}

#gallery li a p 
{
  margin:0;
  padding:5%;
  font-size:0.75em;
  color:#bdc3c7;
}

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

.profile-photo{
  display:block;
  max-width:150px; 
  margin:0 auto 30px; /* cneter the imag using margin and add 30px at the bottom */
  border-radius:100%; /* rounded corner to element - profile pic/dp*/
}


/******************************
PAGE : Contact
*******************************/

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

.contact-info a {
  display: block; /* each image/anchor elements takes up space so that images displayed correct*/
  min-height:20px; /* least 20px */
  background-repeat:no-repeat; /* BG images in CSS will always repeat by default but we want these BGs display only once */
  background-size:20px 20px; /* resize the BG, slightly larger than they need to be, infact double*/
  padding:0 0 0 30px; /*left padding btw img and text horizontal*/
  margin:0 0 10px; /*vertical separation*/
  /** Margin adds space on the "outside" of the element and pushes nearby elements away. Padding adds space on the "inside" of the element and makes space between element's edge and its content**/
}

.contact-info li.phone a {
  background-image:url('../img/phone.png'); /** .. will jump out from CSS and then go to img folder **/
  /** BG can set all values for a bg, inc colors and images but BG-image can only set image**/
}

.contact-info li.mail a {
  background-image:url('../img/mail.png'); /** .. will jump out from CSS and then go to img folder **/
}
.contact-info li.twitter a {
  background-image:url('../img/twitter.png'); /** .. will jump out from CSS and then go to img folder **/
}



/******************************
COLOR
*******************************/

/* site body */
body {
  background-color: #fff;  /* site body */
  color: #999;
}


/* Green header */
header{
  background: #6ab47b;
  border-color: #599a68;

}
/* nav background on mobile */
nav {
  background: #599a68;
}
/* logo text White header */
h1,h2 {
  color: #fff;
}
a{
  color: #6ab476; 
}
/* nav link */
nav a, nav a:visited {
  color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f; 
}