For some reason, my columns on the 'Contact' page are not stacking on top of each other when resizing the browser window

Hi there! You've got a couple of issues here. One is a typo, but the big one is that your rules don't reside inside your media query. Take a look at your responsive.css:

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

}

This media query starts and ends with no rules defined. Then you have code that sets your rules, and then you have the start of another media query which also has no rules defined. This is why nothing is happening when resizing your browser. Nothing is defined in these rules.

Also, on one rule you managed to spell "gallery" as "galleri". I've taken the liberty of altering your code so that it works correctly. I've also included some comments. You may find it here:

@media screen and (min-width: 480px) {  /* begin media query */

  /****************************
  TWO COLUMN LAYOUT
  ****************************/

#primary {
  width: 50%;
  float: left;
  }

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

  /****************************
    Page: PORTFOLIO
  ****************************/

  #gallery li {
  width: 28.3333%;
  }

  #gallery li:nth-child(4n) {  /*  gallery was misspelled here as "galleri" */
    clear: left;
  }
}  /* end media query */

@media screen and (min-width: 660px) {  /* begin next media query */

} /* end next media query */

Hope this helps!