Selected nav link / hover won't show a different color (HTML/CSS)

Question

I'm very new to this, so forgive me if the problem is something minor. I've spent the last hour trying to back-step over the tutorials to see if I could fix it myself and I can't seem to find where the problem is.
All of my text is white all the time, and I can't seem to get the hover or the selected page to show anything different.
/*******************************
GENERAL
*******************************/
body {
  font-family: 'PT Sans', sans-serif;
}
wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}
a {
  text-decoration: none;
}
img {
  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: 'Indie Flower', sans-serif;
  margin: 12px 0;
  font-size: 3.75em;
  font-weight: normal;
  line-height: 0.8ems; 
}
h2 {
  font-size: 0.75ems;
  margin: -5px 0 0;
  font-weight: 400;
}
/*******************************
COLORS
*******************************/
/site body/
body {
  background-color: #fff;
  color: #999;
}
/heading/
header {
  background: #999fff;
  border-color: #943fff;
}
/nav background on mobile/
nav {
  background: #943fff;
  font-family: 'PT Sans', sans-serif;
}
/logo text/
h1, h2 {
  color: white;
}
/links/
a {
  color: #000000;
}
/selected nav link/
nav a.selected, nav a:hover {
  color: red;
}
/nav link/
nav a, nav a:visited {
  color: #fff;
}
/*******************************
NAVIGATION
*******************************/
nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
  color: #888888;
}
nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}
nav li {
  display: inline-block;
}
nav a {
  font-weight: 400;
  padding: 15px 10px;
}
/*******************************
FOOTER
*******************************/
footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
}
.social-icon {
  width: 30px;
  height: 30px;
  margin: 0 5px;
}
/*******************************
PAGE PORTFOLIO
*******************************/
gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}
gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc;
}
gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc;
}

Marek Chwala · Accepted Answer

Hello Nikki,
Remember that CSS is Cascading, which means that order makes all the difference. 
To answer your more immediate question, these two rules should be switched. 
css
/selected nav link/ nav a.selected, nav a:hover { color: red; }
/nav link/ nav a, nav a:visited { color: #fff; }

What's happening here is that you are setting the anchor class "selected"  text color to be red, but then right after you seem to be setting the anchor text color to white. Even though its more general it still overwrites the previous statement. It should look more like this.
css
/*nav link*/
nav a, nav a:visited { 
  color: #fff; 
}
/*selected nav link*/ 
nav a.selected, nav a:hover {
  color: red; 
}

But just a heads up, a good portion of the CSS seems to be out of order from the tutorial and may make your website not look exactly as expected. I highly suggest looking closer at the ordering of rules in CSS. 
Wish you the best in your further studies.

Daniel Gauthier · Answer

Hey Nikki,
I noticed you were wondering how you could share your code with the forums.  Here's a guide:
How to Post Code on the Forums
There are two ways to share your code on the forums here, excluding using external tools from outside of Treehouse.
Method One
The first method is to use a series of three ` (backticks, located at the top left of the keyboard) without any spaces on one line, paste all of your code starting on the second line, then closing the code block with a second series of three backticks.  Take a peek at the link for the "Markdown Cheatsheet" located above the "Post Answer" button anytime you're about to post a comment or answer.  Using this method, the code will look like this:  
```css  
   (code here)  
```  
Method 2
The second method is a little more convoluted, but it lets us look at your entire project and make our own copy to try fixing issues.  I'll order the steps since it can be a little confusing the first time around:
Open the workspace you're having trouble with.
On the menu bar located to the left of the "Preview Workspace"  button is the "Snapshot Workspace" (camera icon), click that.
A popout will appear with another button that says "Take Snapshot", click that.
It should create a new snapshot, which will appear beneath the "Take Snapshot" button in the popout.  Click the snapshot you want to share.
The snapshot should open a new browser tab.  Highlight the url in the snapshot's browser tab (it should look like this: https://w.trhou.se/duckyj79b1i0 ).
Create your forum post and paste the snapshot's url into the post.  Other Treehouse users will be able to open the snapshot, then 'fork' a new copy to check out.
Keep in mind that you can only ever have five snapshots, but you can delete them by hovering over the snapshot located below the "Take Snapshot" button in the popout and click the trash bin icon.
Good luck!

Welcome to the Treehouse Community

Looking to learn something new?

Nikki Fazio

Nikki Fazio

Selected nav link / hover won't show a different color (HTML/CSS)

wrapper {

logo {

gallery {

gallery li {

gallery li a p {

Steven Parker

Steven Parker

Nikki Fazio

Nikki Fazio

2 Answers

Marek Chwala

Marek Chwala

Nikki Fazio

Nikki Fazio

Daniel Gauthier

Daniel Gauthier

How to Post Code on the Forums

Method One

Method 2

Nikki Fazio

Nikki Fazio