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 Styling Web Pages and Navigation Style the Portfolio

Posted by Robbie Singh
Robbie Singh
3,675 Points

Part of my CSS code is showing up in red (i.e. #gallery, etc) What can I do to fix it?

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

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

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

/*************************
COLORS
*************************/
/* green header */
header {
  background-color: #6ab47b;
  border-color: #599a68;
}
/*logo text*/
h1,h2 {
  color:  #fff;
}
/* nav background on mobile */
nav {
  background: #599a68;
}
/* nav link */
nav a, nav a:visited {
  color:  #fff; 
}
Christian Andersson
Christian Andersson
8,712 Points

Edited for markup

Robbie Singh
Robbie Singh
3,675 Points 
#gallery
#gallery li
header
h1,h2
nav
nav a, nav a

all have a background color in red.

Christian Andersson
Christian Andersson
8,712 Points

Hi Robbie,

can you describe what you mean by parts of your css being red?

Robbie Singh
Robbie Singh
3,675 Points

It's still red

Robbie Singh
Robbie Singh
3,675 Points

Hi Christian,

the background color of i.e. #gallery is highlighted in red, as if it's an error.

Christian Andersson
Christian Andersson
8,712 Points

Hmm, what text editor are you using? Are you sure it's not the editor just color coding the various elements (just like it did here)?

Robbie Singh
Robbie Singh
3,675 Points

I'm using workspaces

Christian Andersson
Christian Andersson
8,712 Points

Alright. The code you posted, is that ALL of your css code in that file?

Robbie Singh
Robbie Singh
3,675 Points

No, it's just the parts that are affected.

The whole CSS file is:

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

body { font-family: 'Gafata', 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; }

a { color: #6ab47b; }

h1 { font-family: 'font-family: 'IM Fell DW Pica SC', serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height:0.8em; }

h2 { font-size:0.75cm; margin:-5px 0 0; font-weight:normal; } /*********************** Navigation ************************/

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

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

footer { font-size: -.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; }

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

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

/* green header */

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

h1,h2 { color: #fff; } /* nav background on mobile */

nav { background: #599a68; } /* nav link */

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

Robbie Singh
Robbie Singh
3,675 Points

I'm starting to think it's a bug

Robbie Singh
Robbie Singh
3,675 Points

Thank You!

Alex Friant
Alex Friant
6,444 Points

You're welcome. I guess I should have posted my answer using the "Post Answer" option at the bottom instead of the "Add Comment" feature. Oh well :-)

Robbie Singh
Robbie Singh
3,675 Points

Can't you still do it? I'll select it as the best answer for others who are experiencing the same issue.

Alex Friant
Alex Friant
6,444 Points

Thanks for the offer :-) I just deleted my original comment, and posted it back as an answer. I appreciate the "best answer" points!

1 Answer

Alex Friant
Alex Friant
6,444 Points

The problem is with this block of code:

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

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

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

You are missing the closing bracket "}" after "color: #ccc;"

It should look like this:

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

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

/*********************** PAGE: PORTFOLIO ************************/
Robbie Singh
Robbie Singh
3,675 Points

I appreciate your help; thank you!

Terilyn Steverson
Terilyn Steverson
1,861 Points

Whooooaaaaa I had this same problem! thanks for posting this! :)