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

General Discussion

Posted by Caroline Sheehan
Caroline Sheehan
Courses Plus Student 784 Points

What's wrong with my code? supposed to be 2 columns of images, Portfolio - contact to be horizontal, centered. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mary Colette Sheehan | Portfolio</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Cinzel:400,700,900|Mate:400italic|Open+Sans:400,300,400italic,700italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    </head>
  <body>
     <header>
      <a href="index.html" id="logo">
        <h1>Mary Colette Sheehan</h1>
        <h2>Digital Arts and Humanities</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="numbers-01.jpg">
               <img src="numbers-01.jpg" alt="">
                <p>Experimentation with color and texture </p>
               </a>
            </li>
              <li>
              <a href="numbers-02.jpg">
                <img src="numbers-02.jpg" alt="">
                  <p>Experimentation with color and texture 1</p>
             </a>
            </li>
              <li>
              <a href="numbers-06.jpg">
                <img src="numbers-06.jpg" alt="">
                  <p>Experimentation with color and texture 2</p>
             </a>
            </li>
              <li>
              <a href="numbers-09.jpg">
                <img src="numbers-09.jpg" alt="">
                  <p>Experimentation with color and texture 3</p>
             </a>
            </li>
            <li>
             <a href="numbers-12.jpg">
              <img src="numbers-12.jpg" alt="">
                <p>Experimentation with color and texture 4</p>
             </a>
            </li>
            </ul>
    </section>

3 Answers

Steve Suresh
Steve Suresh
13,185 Points
Steve Suresh
Steve Suresh
13,185 Points

Is this all of your code? Have you included a closing div tag for your wrapper?

James Barnett
James Barnett
39,199 Points

Lots of closing tags are missing, like the <body> and <html> tags as well.

Caroline Sheehan
PLUS
Caroline Sheehan
Courses Plus Student 784 Points
Caroline Sheehan
Caroline Sheehan
Courses Plus Student 784 Points

Here is all of my code, my twitter and FB info changed. Thanks.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mary Colette Sheehan | Portfolio</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Cinzel:400,700,900|Mate:400italic|Open+Sans:400,300,400italic,700italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    </head>
  <body>
     <header>
      <a href="index.html" id="logo">
        <h1>Mary Colette Sheehan</h1>
        <h2>Digital Arts and Humanities</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="numbers-01.jpg">
               <img src="numbers-01.jpg" alt="">
                <p>Experimentation with color and texture </p>
               </a>
            </li>
              <li>
              <a href="numbers-02.jpg">
                <img src="numbers-02.jpg" alt="">
                  <p>Experimentation with color and texture 1</p>
             </a>
            </li>
              <li>
              <a href="numbers-06.jpg">
                <img src="numbers-06.jpg" alt="">
                  <p>Experimentation with color and texture 2</p>
             </a>
            </li>
              <li>
              <a href="numbers-09.jpg">
                <img src="numbers-09.jpg" alt="">
                  <p>Experimentation with color and texture 3</p>
             </a>
            </li>
            <li>
             <a href="numbers-12.jpg">
              <img src="numbers-12.jpg" alt="">
                <p>Experimentation with color and texture 4</p>
             </a>
            </li>
            </ul>
    </section>
      <footer>
        <a href="https://twitterxxxx"><img src="twitter-wrap.png" alt="Twitter logo" class="social-icon"></a>
    <a href="http://facebook.xxxxx"> <img src="facebook-wrap.png" alt="Facebook logo" class="social-icon"></a>
      <p>&copy; 2014 Mary C Sheehan.</p>
    </footer>
      </div>
  </body>
 </html>
Caroline Sheehan
Caroline Sheehan
Courses Plus Student 784 Points

And here's all of my CSS 

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

body  {
 font-family:'Mate',  sans-serif;
}

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

a {
text-decoration: none;
}

image {
  max-width:  100%;
}


/************************
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:  'Cinzel', 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 li  {
    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: right;
      clear:  both;
      padding-top:  50px;
      color:  #ccc;
  }

  social-icon {
    width:  20px;
    height: 20px;
    margin: 0 5%;
    }

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




/************************
Color
*************************/



    body  {
  background-color: #fff;
  color:  #999;
}

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

 nav {
  background: #599a68;
}

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

a {
  color: #6ab47b;
}

/*nav link*/
nav a, nav a:visited {
  color: white;
}
/*selected nav link*/
nav a.selected, nav a:hover {
  color:#32673f;
}
Patryk Nowak
Patryk Nowak
14,103 Points
Patryk Nowak
Patryk Nowak
14,103 Points

Hi Caroline, you have mistake in your CSS, line 54 :

  h2  {
  font-size:  0.75em;
  margin: -5px  0 0;
  font-weight:  normal; /* here you forget semicolon :) */
}    /* this is closing bracket which you forget */

/**************************
Navigation
***************************/