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 Use Color in CSS

Posted by Amon Dow III
Amon Dow III
4,086 Points

Can someone help me fix my website some can be the same as Nick in the video " use color in css"

For some reason my code has no mistakes however the border is not appearing on my website. In addition, in my header which include profile, content and about it is still showing up as bullets and is not appearing as white text over top of the green border my code is below first i will put the html then the css

<!doctype html>  
<html>


 <head>
  <meta charset="utf-8">
  <title> Amon Dow III  Designer</title>
  <link  rel="stylesheet" href= "css/normalize.css">
  <link  rel="stylesheet" href= "css/main.css">

 </head>

  <body> 
    <header> 
      <a href="index.html" id= "logo" >
   <h1>Amon Dow III </h1>
   <h2>Designer</h2>
      </a>
            <ul>
            <li><a href="index.html">Portfolio</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>

          </ul>

    </header>


    <div id="wrapper">
<section>
  <ul> 

   <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>Experimentation with color and texture</p>
      </a>
    </li>


     <li>
     <a href="img/numbers-06.jpg">
     <img src="img/numbers-06.jpg" alt="">
     <p>Experimentation with color and texture</p>
     </a>
     </li>

      <li>
     <a href="img/numbers-09.jpg">
     <img src="img/numbers-09.jpg" alt="">
     <p>Experimentation with color and texture</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>

    <li>
      <a href="img/numbers-09.jpg">
      <img src="img/numbers-09.jpg" alt="">
      <p>Experimentation with color and texture</p>
      </a>
    </li>


    <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-06.jpg">
      <img scr="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"></a>
     <img scr="img/numbers-09.jpg" alt="">
    </li>

    <a href="img/numbers-12.jpg"></a>
    <img scr="img/numbers-12.jpg" alt="">



  </ul>

</section>
<footer>
<a href=https://www.facebook.com/amon.dow><img src="img/facebook-wrap.png" alt"Facebbok Logo"></a>
  <p>&copy; 2014 Amon Dow III.</p>

</footer>
    </div >
  </body>



</html>```


///css code 
a{

  text-decoration :none;

}

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

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

a {
  color:#6ab47b;

}

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

}

h1,h2 {
 color:#ffffff;

}

nav {
  background:#599a68;
}

nav a, nav a:visted{
  color:#fff;
}

2 Answers

Meredith Wiegman
Meredith Wiegman
4,804 Points
Meredith Wiegman
Meredith Wiegman
4,804 Points

Hi Amon. My suggestion would be to try adding a border-style value of solid to the header. Also, add a nav tag to the unordered list containing your profile, about, and contact links.

Hope that helps!

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

Hi Amon,

Use this in your CSS:

     /* code to remove the bullets from the list */
      header ul {
        list-style: none;
      }
      /* set the color of the header links. You had a typo here, this is why it wasnt working */
      header a, header a:visited{
        color:#fff;
      }
      /* You set the color of the border but you didnt give it a width (thickness) so it didnt show */
      header{
        background:#6ab47b;
        border:2px solid #599a68;
      }