Trying to get my images to float/display as in the video.

Question

I have been following the video step by step but my images won't display side by side with two rows. any idea why ? heres my code : 
/**********************************
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%;
}
h3 {
  margin: 0 0 1em 0;
}
/**********************************
Heading
***********************************/
header {
  float: left;
  margin: 0 0 30px 0;
  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;
  font-weight: normal;
}
/**********************************
Navigation
***********************************/
nav {
  text-align: center;
  padding: 10px 0;
  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;
  padding-top: 50px;
  color: #ccc;
}
.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}
/**********************************
Page Portfolio
***********************************/
gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}
gallery li {
  float: left;
  width: 45%;
  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;
  border-radius: 100%;
}
/**********************************
Colors
***********************************/
/* site body */
body {
  background-color: #fff;
  color: #999;
}
/* green header */
header {
  background: #6ab47b;
  border-color: #599a68;
}
/* nav background on mobile */
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;
}

Trace Harris · Accepted Answer

it is kinda hard to tell from your code. It would be better for you to format the code like the  markdown cheat sheet shows. but  from what I can tell is that you may need a float-right value on one the galleries. make sure that your width percentages are good. if one container is too large the containers will stack.

Jordan S · Answer

Yes it was actually a problem with floating, once I went over it and made a few edits it is working as intended. Thanks for the help! (and next time ill be sure to format the code for readability)

Welcome to the Treehouse Community

Looking to learn something new?

Jordan S

Jordan S

Trying to get my images to float/display as in the video.

wrapper {

logo {

gallery {

gallery li {

gallery li a p {

2 Answers

Trace Harris

Trace Harris

Jordan S

Jordan S

Trace Harris

Trace Harris