"nav {background: #599a68;}" for some reason does not apply

Question

The darker color that should be applied to the navigation background is not being applied.

This is the css code:

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

body {
  font-family: 'Open 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: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
  padding: 0 0 10px;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
  padding: 0 0 20px 0;

}

h3 {
  margin: 0 0 1em 0
}



/***********************************
NAVEGATION
***********************************/

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

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
  text-align: center;
}

nav li {
  display: inline-block;
}

nav a {
 font-weight: 800;
  padding: 15px 10px;
}



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

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;

}

.social-icon {
  width: 20px;
  height: 20px;
}


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

/***********************************
PAGE: ABOUT
***********************************/

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}

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

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

/* Green header*/
header {
  background-color: #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;
}

And this is the HTML code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Pablo Paramo | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Pablo Nicolas Paramo</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="" height="400" width="600"> <p>Beatiful wheets.</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt="" height="400" width="600"/> <p>Happy family.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt="" height="400" width="600"/> <p>Orange color.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt="" height="400" width="600"/> <p>World mission.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt="" height="400" width="600"/> <p>African Children.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com"><img src="img/twitter.png" alt="Twitter Logo" class="social-icon"></a>
<p>© 2014 Pablo Paramo.</p> </footer> </div> </body> </html>

Answer 1 · 2015-01-17T01:55:39Z

January 17, 2015 1:55am

Hey Pablo, it just looks like you're missing/have a few misplaced semi-colons and curly braces. For that section specifically, changing this would make a big difference:

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

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

/* Logo text*/ 
}

To:

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

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

/* Logo text*/

Hope that helps!

Welcome to the Treehouse Community

Looking to learn something new?

Pablo Paramo

Pablo Paramo

"nav {background: #599a68;}" for some reason does not apply

1 Answer

Ashley Franklin

Ashley Franklin

Pablo Paramo

Pablo Paramo