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!

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

HTML How to Make a Website Adding Pages to a Website Add a New Page

Did not separate into 2 columns

When following the video exactly in Workspaces, the preview failed to have two columns of images like the video

Andy Swinford
Andy Swinford
8,152 Points

Can you provide which video you are experiencing difficulty with so we can better assist?

Hi Sophia,

Can you post the css you added for this?

Jason Anello

/************************** 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%; }

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

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

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

/* pink header */ header { background: #ffb6c1; border-color: #ffe1f0; }

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

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

/links/ a { color: #91219e; }

/* nav link */ nav a, nav a:visited { color: #d0faee; }

/* selected nav link */ nav a.selected { color: #d0faee; }

nav a:hover { color: #7fffd4; }

Christopher Quinn
Christopher Quinn
9,943 Points

The CSS looks correct, check your index.html file to make sure everything in the gallery is correct. Make sure all of your tags are correct as well.

4 Answers

Andy Swinford
Andy Swinford
8,152 Points

Can you provide which video you are experiencing difficulty with so we can better assist?

Style the Portfolio

Nothing seems wrong for the gallery css.

I know this seems obvious but did you save the css and refresh the preview?

Did you double check your html to make sure you have the id set properly?

<ul id="gallery"> spelled correctly and all lowercase?

Yes I did. I'll send you index.html as well ..

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Sophia Su | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Open+Sans|Changa+One' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> </head> <body> <header> <a href="index.html" id="logo">
<h1>Sophia Su</h1> <h2>Designer</h2> </a> <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>Experimentation with color and texture.</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in Photoshop.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 80's style of glows.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips created using Photoshop brushes.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Creating shapes using repitition.</p> </a> </li> </ul> </section> <footer> <a href="http://www.facebook.com/SophiaCarolynSu"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <a href="http://twitter.com/SophiaCarolynSu"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <p>© 2014 Sophia Su.</p> </footer> </div> </body>

html gets stripped out of the forums if not posted properly.

See this discussion for tips on how to post code in the forums: https://teamtreehouse.com/forum/posting-code-to-the-forum


Hi Sophia,

I'm glad you sorted it out. You may want to post what your solution was so others can benefit from it.

There was no solution, for some reason when I logged on today, everything worked.