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

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

Ricardo Guedes
PLUS
Ricardo Guedes
Courses Plus Student 3,270 Points
Posted by Ricardo Guedes
Ricardo Guedes
Courses Plus Student 3,270 Points

My images dont float properly...

My code seams the same but my images stay in top of each other and not in 2 columms like in the exemple

Ricardo Guedes
Ricardo Guedes
Courses Plus Student 3,270 Points
Ricardo Guedes
Ricardo Guedes
Courses Plus Student 3,270 Points

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

body { font-family: 'Bree Serif', 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: 'Bree Serif', serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; } h2 { font-family: 'Lobster', cursive; font-size:0.75em; margin:-5px 0 0; 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: #fff; }

/**************************************** PORTFOLIO *****************************************/

galery {

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

}

galery li {

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

}

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

/Site body/ body { background-color:#a69e9e; color: #999; }

/* grey header*/ header { background: #747474; border: #599a68; }

/* nav background on mobile*/ nav { background: #5f5f5f; }

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

/* links */ a { color: #cbeaf7; }

/* nav link*/ nav a:visited { color:cbeaf7; } /* selected nav link*/ nav a .selected, nav a:Hover { color: #fff; }

8 Answers

Dan Weru
Dan Weru
47,649 Points
Dan Weru
Dan Weru
47,649 Points 
#gallery {

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

#gallery li {

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

Also check to confirm that your use the same word in the css as you have used in your html.

Dan Weru
Dan Weru
47,649 Points
Dan Weru
Dan Weru
47,649 Points

hey, could i have a look at your code?

Dan Weru
Dan Weru
47,649 Points
Dan Weru
Dan Weru
47,649 Points

edit your css file.

your code should be

gallery{...}

noot gallery{...}

.... you have typing errors. Remember gallery is an id and ids start with a '#' symbol in the css file

Ricardo Guedes
PLUS
Ricardo Guedes
Courses Plus Student 3,270 Points
Ricardo Guedes
Ricardo Guedes
Courses Plus Student 3,270 Points

oh! Oops... Too many hours doing this exercises... Thanks alot one weru!

Dan Weru
Dan Weru
47,649 Points
Dan Weru
Dan Weru
47,649 Points

The pleasure is all mine.

Dan Weru
Dan Weru
47,649 Points
Dan Weru
Dan Weru
47,649 Points

Typos happen all the time, keep at it.

Ricardo Guedes
PLUS
Ricardo Guedes
Courses Plus Student 3,270 Points
Ricardo Guedes
Ricardo Guedes
Courses Plus Student 3,270 Points

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ricardo Guedes | Designer</title> <link rel="stylesheet" href="_css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Lobster|Bree+Serif' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="_css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Ricardo Guedes</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 repetition.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a> <p>© 2016 Ricardo Guedes.</p> </footer> </div> </body> </html>