Aligning image

@media screen and (min-width: 480px) {  /* should be 480px bu didnt work */

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

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

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


/*******************************
3 * 2.5 + 2.5 = 15
100% - 15% = 85%
85 / 3 = 28.33333333 (repeating)
*******************************/

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

#gallery li {
    width: 28.3333%;
}

#gallery li:nth-child(4n) { /* clears every 4th item insode the gallery to align properly */
    clear: left;
}



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

}   

/******************
GENERAL 
*******************/



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

#wrapper {
  max-width: 940px;
  margin: 0 auto; /* 0 sets top & bottom. auto sets left & right automatically*/
  padding: 0 5%;
}


/* removes underlines under links */
a {
  text-decoration: none;
}

/*stops images from breaking outside container */
img {
max-width: 100%;
}

h3 {
  margin: 0 0 1em 0;
}



/*******************************
HEADING
*******************************/

header {
  float: left;
  margin: 0 0 30px 0; /*top right bottom left*/
  padding: 5px 0 0 0;
  width: 100%;
}

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

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

h2 {
  font-size: 0.75em;
  margin: -5px 0 0; /* top, left & right, bottom margin */
  font-weight: normal;
}



/****************************
NAVIGATION
****************************/



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

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

nav li {
  display: inline-block;
}

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



/****************************
FOOTER
****************************/



footer {
  font-size: 0.75em;
  text-align: center;
  clear: both; /* this stops the footer from aligning like the images */
  padding-top: 50px;
  color: #ccc;
}

/* for high resolution. always resize after you have link. This way it will keep the high resolution. Do not resize first.*/
.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}



/****************************
PAGE: PORTFOLIO this section is to align images side by side
****************************/



#gallery {
  margin: 0;
  padding: 0;
  list-style: none; /*removes bullet point from list */
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7; /* text color set to grey. Will not see unless captions are unlinked from Google Fonts*/
}

#gallery li a p { /* targets text in the gallery */
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}



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



.profile-photo {
  display: block; /*this will allow to use auto margins (as below) to center the element on the page. */
  max-width: 150px;
  margin: 0 auto 30px; /*margin auto will help center image on the page */
  border-radius: 100%;
  float: left;
  margin: 0 5% 80px 0;
}




/*******************************
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.phone a {
  background-image: url('../img/phone.png');
}

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

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




/*******************************
COLORS
*******************************/



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


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


/* nav background on mobile devices */
nav {
  background: #599a68;
}


/* logo text */
h1, h2 {
  color: #fff;
}


/*links */
a {
  color: #6ab47b;
}



nav a, nav a:visited { /*link stays white when visited*/
  color: #fff;
}


nav a.selected, nav a:hover { /*Portfolio selected to be green also hover effect on other nav elements */
  color: #32673f;
}