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 Image Captions

My website doesn't look anything like his but I followed all the correct coding?

I'm missing the green header, my images aren't the size they should be nothing is changing when I update the code

4 Answers

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher

Hi Jacob,

I edited your post so that the code is displayed correctly.

It looks like you're missing closing curly braces on your element selectors for the body and the nav elements.

For example, this snippet from your post...

body{
  font-family: 'Opens Sans', sans serif;

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

...should instead look like this:

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

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

The same is true for the nav selector. This code...

/**************************
NAVIGATION
***************************/


  nav {
    text-align: center;
    padding: 10px 0;
    margin 20px 0 0;

...should instead look like this:

/**************************
NAVIGATION
***************************/

nav {
    text-align: center;
    padding: 10px 0;
    margin 20px 0 0;
}

I'm not sure if that will completely fix the problem, but fixing syntax errors like this is always the place to start.

All the best,

Nick

Thank you so much nick. This really helped and worked! Appreciate you!

You might have some issues with your comment tags in your CSS. Make sure your comments start with /* and end with */.

Looks like the comments might be getting messed up around the area where you set your green header styles.

Hi Jacob! You forgot to close your CSS comments. In CSS comments start with /* and end with */. Close your comments and everything should work just fine.

I looked at my comments. they are the way you say they should be

Jacob, which browser are you using?

Jesus Mendoza
Jesus Mendoza
23,289 Points

Hey Jacob,

Can you show us your code?

here is the css

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


body{
  font-family: 'Opens 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: 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
    }


/**************************

COLORS
***************************/
/* green header */


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



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

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

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

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


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

here is the html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Jacob Olenick | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400i,700,700i,800" rel="stylesheet">
     <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
      <h1>Jacob Olenick</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 with globes</p>
            </a>
          </li>
          <li>
            <a href="Img/numbers-09.jpg">
            <img src="Img/numbers-09.jpg" alt="">
            <p>Drips created using photoshop</p>
            </a>
          </li>
          <li>
            <a href="Img/numbers-12.jpg">
            <img src="Img/numbers-12.jpg" alt="">
            <p>Experimentation with color and texture.</p>
            </a>
          </li>
     </ul>
        </section>
       <footer>
         <a href="http://twitter.com/jacobolenick"><img src="Img/twitter-wrap.png" alt="Twitter Logo"></a>
          <a href="http://www.facebook.com/jacobolenickstudio"><img src="Img/facebook-wrap.png" alt="Facebook Logo"></a>
          <p>&copy; 2017 Jacob Olenick.</p>
        </footer>
      </div>
    </body>
 </html>