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

HTML How to Make a Website Styling Web Pages and Navigation Build Navigation with Unordered Lists

martin wong
martin wong
4,799 Points
Posted by martin wong
martin wong
4,799 Points

CSS is messed up and i dont know what i done wrong

So at first i tried altering my NAV bar like in video but it kept overlapping my h1 and and when i hovered over the options, it kept like 'flashing' and taking up the width of the space. So ive been playing around to try get it right but now ive totally messed up my code and my images are coming up huge. I dont know what to do and am getting frustrated. help please!

my main problem now is my logo/header wont show my p1.

/****************************
General
*****************************/
body {
  color:#988;
  background:white;
  font-family: 'oswald', monospace;
}
#wrapper {
  margin:0 auto;
  padding:5px;
  max-width:940px;


}

img {
  max-width:100%;
}

footer {
  clear:both;
  text-align:right;

}
a {
  text-decoration:none;
}

/****************************
LOGO/HEADING
****************************/
header {
  float: left; 
  margin:0 0 30px 0;
  padding: 5px 0 0 0;
  width:100%;

}

#logo {
  text-decoration:none;
  background:#a0a0a0;
  margin:0;
  color:#fff;

}

h1 {
  font-size:2em;
  font-weight:normal;
  line-height:0em;
  color:#fff;
  text-align:center;
  margin:5px;

}


/*************
NAV
*************/
nav {
  margin:20px;
  padding:10px;
  line-height: 1.1em;
  padding-bottom:0px;
  text-align:center; 
}
nav ul {
  text-align:center;
  list-style:none;
  padding:0;
  margin:0 10px;

}
nav li{
  display:inline-block;

}


/****************************
nav a links
*****************************/
nav {
  background:#d0d0d0;
}

nav a, nav a:visited {
  color:#FFF;
}
nav a.selected, nav a:hover {
  color:#131c1f;
}
/***************************
Imaging
***************************/

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

#gallery li {
  float:left;
  width:45%;
  margin:2.5%;
  background-color:#7f7f8f;
  color:#fff;
}


#gallery li a p {
  margin:0;
  padding:5px;
  color:#fff;
  font-size: 0.8em;
}
#gallery p:hover {
  color:#131c1f;
}

2 Answers

martinjones1
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
martinjones1
Front End Web Development Techdegree Graduate 44,824 Points
martinjones1
.a{fill-rule:evenodd;}techdegree seal-36
martinjones1
Front End Web Development Techdegree Graduate 44,824 Points

Hi Martin,

I would first update some of the styling in your h1 tag to:

h1 { color: #333; line-height: 1.5; }

At the moment the h1 color is white on a white background, so does not appear like it is present, so not overlapping, just blending into the background color.

Following that, the image issue just appears to be a small syntax error on line 106, just remove the extra "," and it will work OK :)

If you click on the link below to the W3C CSS Validator, you can copy and paste in your CSS to test it

(https://jigsaw.w3.org/css-validator/validator)

Hope this helps,

martin wong
martin wong
4,799 Points
martin wong
martin wong
4,799 Points

Finally got it working after realising!

Also that validator is very useful. Thank you!