Image won't float left during media query (Stage 8- Responsive Web Design)

Hello, in the episode about using media queries to automatically set elements in 2-columns (or just float them to use the browser window width above 480px), my profile pic won't float left despite having the same code as Nick. I even downloaded his code and pasted it in my workspaces. The img should move left and the text move underneath. I've checked my About html to ensure my class is actually class="profile-photo". Here is the whole css, the media query at the top, and the problem code is the bottom part with the profile-photo class:

<@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(4n) { clear: left; }

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

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

}

When I expand the browser above 480px, the image doesn't move left. If anyone ken identify where the problem is, that would be great. I'm sure it's not the image size as it has been resized using css.

Many thanks