Still only One column showing...Help

Question

Here is my code.....I use Firefox. I cannot see why I'm still only seeing one column.

CSS Below:

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

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

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; }

/************** FOOTER **************/

footer { font-size: 0.75em; text-align: center; padding-top: 50px; color: #ccc; }

/************** PAGE: PORTFOLIO **************/

gallery {

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

gallery li {

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

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

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

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

/* nav background on mobile */ nav { background: #599a68; }

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

/* links */ a { color: #6ab47b; }

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

/* selected nav link */ nav a.selected, nav a:hover { color: #32673f; }

HTML Code Below:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tyler Cornett | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css">
</head> <body> <header> <a href="index.html" id="logo"> <h1>Tyler Cornett</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html">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"><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>© 2015 Tyler Cornett.</p> </footer> </div> </body> </html>

Answer 1 · 2015-03-21T16:22:56Z

March 21, 2015 4:22pm

Robert Richey is right. Also, I think in your CSS rule, you mean to be targeting the list items inside #gallery, not the anchor element.

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

Answer 2 · 2015-03-20T20:11:56Z

March 20, 2015 8:11pm

Hey there - it's kind of hard to see what your code is saying. Can you wrap each block of code in Markdown tags like this:

```CSS

[your CSS code here]

```

```HTML

[your HTML code here]

```

Answer 3 · 2015-03-20T21:25:28Z

March 20, 2015 9:25pm

here you go....

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





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

#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;
}


/**************
FOOTER
**************/

footer {
  font-size: 0.75em;
  text-align: center;
  padding-top: 50px;
  color: #ccc;
}


/**************
PAGE: PORTFOLIO
**************/

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

#gallery a {
  float: right;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}




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



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


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

/* nav background on mobile */
nav {
  background: #599a68;
}

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

/* links */
a {
  color: #6ab47b;
}


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

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}

Here is HTML code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Tyler Cornett | Designer</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/main.css">  
</head>
  <body>
<header>
  <a href="index.html" id="logo">
<h1>Tyler Cornett</h1>
<h2>Designer</h2> 
    </a>
<nav>
  <ul>
    <li><a href="index.html">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"><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 Tyler Cornett.</p>
    </footer>
   </div>
  </body>
</html>

Answer 4 · 2015-03-21T16:08:30Z

March 21, 2015 4:08pm

Just a small typo to fix. Change the colon preceding gallery with and equal sign.

<!-- before change -->
<ul id:"gallery">

<!-- after change -->
<ul id="gallery">

Hope this helps,

Cheers

Answer 5 · 2015-03-22T18:35:34Z

March 22, 2015 6:35pm

than you everyone!!! It worked!! Tyler

Welcome to the Treehouse Community

Looking to learn something new?

Tyler _

Tyler _

Still only One column showing...Help

wrapper {

logo {

gallery {

gallery li {

julio cesar

julio cesar

5 Answers

Greg Kaleka

Greg Kaleka

Greg Kaleka

Greg Kaleka

Tyler _

Tyler _

Robert Richey

Robert Richey

Tyler _

Tyler _