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

Okey im pretty sure i did something wrong i cant seem to get the pictures go into 2 colums

So i tried looking a bit through the forum but i cant find what i did wrong the pictures dont want to go into 2 colums and just stay big hope someone can help me out

Louis Otto
Louis Otto
23,264 Points

Hello,

It's good practise when asking questions to provide your code so that we can analyse it and help you out. Please attach your wrong code and we can see how to guide you best.

ow im sorry im not exactly sure how to put the code here but il just copy and paste it

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Michael Huigen | Prortfolio</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Josefin+Sans:400,600,700,700italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Michael Huigen</h1> <h2>Portfolio</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="gallary"> <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>trying to design a website.</p> </a> </li> <li><a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>lets see if it works.</p> </a> </li> <li><a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>this is my best work.</p> </a> </li> <li><a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>oh its my only work.</p> </a> </li> </ul> </section> <footer> <a href="http://facebook.com/dashmaniac"> <img src="img/twitter-wrap.png" alt="Twitter logo"></a> <a href="https://facebook.com/dashmaniac"> <img src="img/facebook-wrap.png" alt"Facebook logo"></a> <p>© 2015 Michael Huigen</p> </footer> </div> </body>

</html>

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

/******************************************** header *********************************************/

logo {

text-align: center; margin: 0; }

a{ color: #6ab47b; } h1 { font-family: 'josefin sans', 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;
} nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; } /******************************************** page portfolio *********************************************/

#gallary { margin: 0; padding: 0; list-style: none; }

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

}

gallary li a p {

margin: 0; padding: 5%; font-size: 1.00em; color: #000 }

/******************************************** color *********************************************/

/site body/ body{ background-color: #fff; color: #6ab47b; }

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

h1, h2{ color: #111; } /* nav background mobile*/ nav { background: #6aa17b; } nav a, nav a:visited { color: #111; } /selected nav link and hover/ nav a.selected, nav a:hover { color: #32673f; }

3 Answers

Rich Barker
Rich Barker
7,832 Points

Your spelling of #gallery is incorrect in your css. Under "page portfolio.

omg cant believe i did that

also i found it was misspelled in the index.html

awkward i did that feels so dumb anyway thanks for the help it is fixed now

Rich Barker
Rich Barker
7,832 Points

I really quite new to css and html, I only spotted it because I have made similar mistakes quite often. Lol.

Louis Otto
Louis Otto
23,264 Points

Hi Michael,

You're wrapping your images inside links, within list items, which isn't the best way to organise code for galleries. I recommend going through the following course to learn about divs and css styling:

https://teamtreehouse.com/library/css-layout-basics