Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Ricardo Thousand
Ricardo Thousand
1,977 Points
Posted by Ricardo Thousand
Ricardo Thousand
1,977 Points

Only getting 1 column for photos.

I'm trying to find what I did wrong, but I'm unable to. I only get one column of photos. The background was changed to gray, and text to green. The images scale with the width of the page. But I only get 1 column.

Here's the html: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">  
    <title>Ricardo | Awesome.</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Arvo|Fjalla+One|Hind' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <div id="logo">
        <a href="index.html">
          <h1>Ricardo Thousand</h1>
          <h2>Awesome.</h2>
        </a>
      </div>
      <nav>
        <ul>
          <li><a href="index.html" class ="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href= "contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
     <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
              <a href="img/numbers-01.jpg">
              <img src ="img/numbers-01.jpg" alt"">
              <p>First Photo.</p>
             </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src ="img/numbers-02.jpg" alt"">
              <p>Oh my god. This is the second photo.</p>
             </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src ="img/numbers-06.jpg" alt"">
              <p>Damn homie. You're reading the description for the second photo.</p>
             </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src ="img/numbers-09.jpg" alt"">
              <p>Lalala Don't mind me.. I'm just the 3rd photo.</p>
             </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src ="img/numbers-12.jpg" alt"">
              <p>Oh my. Loook at you checking me out. Who likes the 4th photo? You do.</p>
             </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com"><img src="img/twitter-wrap.png" alt "Twitter Logo"></a>
        <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt "Facebook Logo"></a>
        <p>&copy; 2015 Ricardo</p>
      </footer>
    </div>
  </body>
</html>

and here's the css:

/*General*/
body {
  font-family: 'Hind', 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: 'Fjalla One', sans-serif;
  margin: 15px 0;
  font-size: 1.76em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -15px 0 0;
  font-weight: normal;
}

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

/*Footer*/
footer{
  font-size: 0.75em;
  text-align: center;
  padding-top: 50px;
  color: #555;
}

/*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*/
body {
  background-color: #fff;
  color: #999;
}

h1, h2{
  color:#fff;
}

a {
  color: #6ab47b;
}


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

nav{
background-color: #599a68;
}

nav a, nav a:visited {
  color: #fff;
}

nav a:hover{
  color: #32992f;
}

nav a.selected{
  color: #32673f;
}
Bobby Martin
Bobby Martin
8,624 Points
Bobby Martin
Bobby Martin
8,624 Points

So your #gallery li is set to float: left. So everything within that unordered list is gonna float left.

1 Answer

miguelcangueiro
miguelcangueiro
5,473 Points
miguelcangueiro
miguelcangueiro
5,473 Points

Hi Ricardo,

I tested your bits of code and it worked on my end. So, what I would do next is just try to clean the browser cache and try again.

Also, you are missing some "=" signs in your code, after the alt tag and before the opening quotes.

Ricardo Thousand
Ricardo Thousand
1,977 Points
Ricardo Thousand
Ricardo Thousand
1,977 Points

I tried doing a hard refresh before posting, but that didn't work. I somehow got it to work, though. Thank you for your help Miguel!