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

Posted by HARRIS SPAHIC
HARRIS SPAHIC
4,890 Points

For some reason I only have one column for my pictures, and I can't find any mistakes.

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

wrapper {

max-width: 940px; margin: 0 auto; padding:0 10% }

a { text-decoration: none; }

img { max-width: 100%; }

ul { list-style:none; }

/************** HEADING **************/

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Lato', sans-serif; margin: 15p 0; font-size: 2em;
}

/************** Pictures *************/

pictures {

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

pictures li{

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

/************** COLOR *************/

h1, h2{ color:#3aafff }

nav a{ color: #3aafff }

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

nav a.selected, nav a:hover { color: #6affff }

header{ background: green; border-color: black

}

HARRIS SPAHIC
HARRIS SPAHIC
4,890 Points

I apologize but I do not know how to post it directly in workspace

Steven Ventimiglia
Steven Ventimiglia
27,371 Points
Steven Ventimiglia
Steven Ventimiglia
27,371 Points

I see a lot of errors with what you pasted. However, go ahead and post the HTML that this will apply to and I'll help you out.

Also, check out the link below a new comment or post, called "Markdown Cheatsheet". It will help you post code in a way that everyone else on the forum will be more likely to follow.

An Example:

teaser.html 
Markdown Cheatsheet

Markdown is a short-hand syntax for easily converting text to HTML. Below are some popular examples of Markdown formatting. For more examples reference Markdown Basics for a more detailed overview.
Links

This is an [example link](http://example.com/)

Continue...
HARRIS SPAHIC
HARRIS SPAHIC
4,890 Points 
/****************
     GENERAL
***************/

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding:0 10%
}

a {
  text-decoration: none;
}


img {
  max-width: 100%;
}

ul {
  list-style:none;
}

/**************
    HEADING
**************/

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Lato', sans-serif;
  margin: 15p 0;
  font-size: 2em;  
}



/**************
   Pictures
*************/

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

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

 /**************
    COLOR
*************/

h1, h2{
  color:#3aafff
 }

nav a{
  color: #3aafff
}

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

nav a.selected, nav a:hover {
  color: #6affff
}

header{
  background: green;
  border-color: black  

}

Note that instead of using Gallery I used pictures as my id.

HARRIS SPAHIC
HARRIS SPAHIC
4,890 Points 
<!Doctype html>
  <html>
    <head>
      <meta charset:"utf-8">
      <title>Harris Spahic | Designer</title>
      <link rel="stylesheet" href="css/normalize.css">
      <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
      <header>
        <a href="Harris.html" id="logo">
          <h1>Harris Spahic</h1>
          <h2>Designer</h2>
        </a>
        <nav>
          <ul>
            <li><a href="Harris.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>
            <li>
              <a href="cl/3_code-matrix-944969.jpg">
              <img src="cl/3_code-matrix-944969.jpg" alt="">
              <p>1</p>
              </a>
            </li>
            <li>
              <a href="cl/rvn-swimming-3.jpg">
              <img src="cl/rvn-swimming-3.jpg" alt="">
              <p>2</p>
              </a>
            </li>
            <li>
              <a href="cl/cool-blue-background-wallpapers-hq-pictures-backgrounds-17568.jpg">
              <img src="cl/cool-blue-background-wallpapers-hq-pictures-backgrounds-17568.jpg" alt="">
              <p>3</p>  
              </a>
            </li>
            <li>
              <a href="cl/cool-wallpapers-large-hd-wallpaper-database-zlnstyzt.jpg">
              <img src="cl/cool-wallpapers-large-hd-wallpaper-database-zlnstyzt.jpg" alt="">
              <p>4</p>
              </a>
            </li>
            <li>
              <a href="cl/">
              <a href="cl/Cool-Wallpaper-Hand-Background.jpg">
              <img src="cl/Cool-Wallpaper-Hand-Background.jpg" alt="">  
              </a>
              <p>5</p>
              </a>
            </li>
            <li>
              <a href="cl/math_number.jpg">
              <img src="cl/math_number.jpg" alt="">
              <p>6</p>
              </a>
            </li>
          </ul>
       </section>
       <footer>
        <p>&copy;Harris Spahic</p>
       </footer> 
      </div>
     </body>
     ```
This is all of my html code.
HARRIS SPAHIC
HARRIS SPAHIC
4,890 Points

There is still no change, after all that I still only have one column. Thank you for trying though.

HARRIS SPAHIC
HARRIS SPAHIC
4,890 Points

I found my mistake finally and was able to fix it, thank you for guiding me on the right track.

3 Answers

Yulia Markina
Yulia Markina
12,616 Points
Yulia Markina
Yulia Markina
12,616 Points

Hi Harris! Sorry for the delayed answer. Here is my approach. I gave a class "gallery" for the UL. One column is a natural document flow, to make two or more columns you need to use float:left. Number of columns you can change by changing percentage of the gallery class. 50% will give you 2 columns and so on. 

.gallery {
  text-align: center;
}
.gallery li {
  list-style: none;
  float: left;
  width: 30%;
}
footer {
  clear: both;
}

Hope it helps!

Yulia Markina
Yulia Markina
12,616 Points
Yulia Markina
Yulia Markina
12,616 Points

Hi Harris! Could you please insert your HTML code as well? For now I see only a small typo which is not related to your issue. 15*px*

h1 {
  font-family: 'Lato', sans-serif;
  margin: 15px 0;
  font-size: 2em;  
}
Steven Ventimiglia
Steven Ventimiglia
27,371 Points
Steven Ventimiglia
Steven Ventimiglia
27,371 Points

Harris,

It looks like you forgot to place #pictures selector into the HTML. Making the

<section>

that starts after

<div id="wrapper'>

into

<section id="pictures">

will fix this.

Example: http://codepen.io/StevenVentimiglia/pen/jEvddM

Also, keep in mind that

<!Doctype html>

should be typed as

<!DOCTYPE html>

as well as

<meta charset:"utf-8">

being correctly defined as

<meta charset="utf-8">

Good job, so far. And, welcome to Treehouse. :D