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

Julia Kuti
PLUS
Julia Kuti
Courses Plus Student 1,850 Points
Posted by Julia Kuti
Julia Kuti
Courses Plus Student 1,850 Points

I have the correct code to fix the header of the web page in CSS but when I refresh the page it is not changing?

I coded everything like Nick does in the video to make that top white line above the header to go away, but when I refresh the page it is not changing it. Is there something else in CSS that I may have wrong besides the header part that is keeping this white space above the header on the web page?

Jeff Kinley
Jeff Kinley
21,207 Points
Jeff Kinley
Jeff Kinley
21,207 Points

Can you show us your code?

8 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

By any chance are you coding this work in Chrome DevTools or other browser development tools. If so these changes are wiped out as soon as you refresh the browser screen and you have to save the code in a text editor to make them permanent.

Just a thought. Please post your code though in case it's something else that is the problem. :-)

Julia Kuti
PLUS
Julia Kuti
Courses Plus Student 1,850 Points
Julia Kuti
Julia Kuti
Courses Plus Student 1,850 Points

Here is the code copied from works space exactly and I still have that white line at the top even after saving many times in works space.

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Okay Julia. this seems like you have the right code.

header { 
  float: left; 
  margin: 0 0 30px 0; 
  padding: 5px 0 0 0; 
  width: 100%; 
}

Would you be able to close the preview tab that Workspaces opens for you and see if that makes a difference. Workspaces might be saving the original version of your code in it's cache.

James Richardson
James Richardson
1,722 Points

I'm having the same issue :( was following along and couldn't get it to work, and even pasted in your example above, closed the preview window that Workspace has opened previously but the white space at the top is still there.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Try opening the Dev Tools in Chrome with CTRL / CMD + J and see if you can find the element that's pushing the margin from the top. That's what you're seeing is the white background because the margin value is being inherited from a parent element.

You should be able to use the property inspector in DevTools and seek out the element you need there.

James Richardson
James Richardson
1,722 Points
James Richardson
James Richardson
1,722 Points

Hmm, have just inspected the elements and it seems that the gallery UL is highlighting that white space at the top when hovering over it, but in my CSS the margin has already been set to 0 on this part.

I even moved the CSS around so that this should override any other CSS due to the cascading nature but it doesn't seem to make any difference, will keep digging..

James Richardson
James Richardson
1,722 Points
James Richardson
James Richardson
1,722 Points

Fixed! I pinpointed that it was the Gallery part which was causing the issue, so after a bit of HTML tinkering, it seems just removing the <ul id="gallery"> part, saving it, then adding it back on again seems to solve the issue.

Mike Catterall
Mike Catterall
486 Points
Mike Catterall
Mike Catterall
486 Points

If anyone else has this issue just go into your css file and add the following lines:

ul{ margin:0; }

Iskander Ismagilov
Iskander Ismagilov
13,298 Points
Iskander Ismagilov
Iskander Ismagilov
13,298 Points

I had the same issue. Thank you, Mike. But why does it work and why the code which Nick provided doesn't work?

Nelson Cole
Nelson Cole
1,423 Points
Nelson Cole
Nelson Cole
1,423 Points

Mike....Thanks..That was it.

Jake Ford
Jake Ford
9,230 Points
Jake Ford
Jake Ford
9,230 Points

Just for future reference, if ever something is not changing after a regular refresh, try refreshing with: CTRL+F5

This will clear the browser cache and load a new instance of the site that should show your changes. This is for a PC, however. If you are on a Mac it may be CMD+F5 or something I'm not sure.