I have followed the video and my images are floating left and they are responsive but they aren't snapping into 2 columns. Any help is welcome.... here's my CSS:

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

wrapper {

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

a{ text-decoration: none; }

img { max-width: 100%; }

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

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{ margin: -5px 0 0; font-size: 0.75em; font-weight: normal; }

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

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

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

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

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

gallery {

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

gallery li{

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

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

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

/* GREEN HEADER */ header { background: #6ab74b; border-color: #599a68; }

/* MOBILE NAV BG */ nav { background: #599a68; }

/* LOGO TEXT */ h1, h2 { color: #fff; }

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

/* NAV LINK */ nav a, nav a:visited { color:#fff; }

/* SELECTED NAV LINK */ nav a.selected, nav a:hover { color: #32673f;