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 How to Make a Website Customizing Colors and Fonts Pick Fonts and Set Relative Units

Adam Maiolo
Adam Maiolo
2,709 Points
Posted by Adam Maiolo
Adam Maiolo
2,709 Points

CSS Not Styling Anything Under Wrapper and Header

Hi everyone,

I'm just super confused about something which happened right after Nick's video about "organizing the comments on your css" video and before the "pick fonts" video.

My workspace preview was acting exactly the same as Nick's up until this point. After re-organizing everything in my CSS, however, somethings began to change and I am not sure why.

It would appear that the browser is not recognizing any of the styling under #wrapper and #logo/header...so basically nothing is centred.

I have cross-referenced my html and css code with Nick's until my eyes have gone red and can't figure out what the problem is...any help would be mondo appreciated.

I'm not sure how to embed my code into a discussion post so I have copied and pasted both below:

Index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Adam Maiolo | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Adam Maiolo</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>
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with colour 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 reptition.</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/maioloncsac"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="http://facebook.com/adammaiolo"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; 2014 Adam Maiolo.</p>
      </footer>
    </div>
  </body>
</html>

css:

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

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

a {
  text-decoration: none;  
}


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


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


h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
}

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

2 Answers

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

Hi, Adam. You have some issues with the heading comments in your CSS. Your headings look like this:

/*********************************/      /* closing / too early here */
GENERAL
**********************************/

but the first line is being closed, causing the file to think that GENERAL and ***********/ are part of the file, which is probably causing your styles not to appear. Try changing them to this:

/*********************************
GENERAL
**********************************/
Adam Maiolo
Adam Maiolo
2,709 Points
Adam Maiolo
Adam Maiolo
2,709 Points

That was it! Thank you so much, Ryan! Very new to the Treehouse community but already loving it :)

Adam

Ryan Field
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

You're very welcome! These kinds of teeny-tiny errors happen all the time, and a fresh pair of eyes is sometimes the best remedy! Glad you're enjoying it here! :)

Keith Ryan
Keith Ryan
1,023 Points
Keith Ryan
Keith Ryan
1,023 Points

Ha. I had the exact same thing. It was driving me mad.

Thanks for the answer.