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

Posted by Hayden LaBrie
Hayden LaBrie
2,913 Points

Header is not getting colored at the very top.

My header portion of the website is not getting colored fully. The very top of the page just doesn't want to get colored for some reason. Thank you for your help! '''html <body> <header> <a href="index.html" id="logo"> <h1>Michael Mckay</h1> <h2>Rapper</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Main</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> header{ padding: 0 0; }

logo{

text-align: center; margin: 0; } h1{ margin-top: 0 }

1 Answer

Kevin Goudswaard
Kevin Goudswaard
11,061 Points
Kevin Goudswaard
Kevin Goudswaard
11,061 Points

Hey

I ran into this same problem on my first build. There is this weird border that lines the outside of the browser, and prevents the header element from meshing to the top of the screen. To remedy this, you want to link in your normalize.css to provide styling to all elements doing this. Adding the normalize.css code into your site also provides a bunch of webkits that are handy for correcting problems across a wide variety of browsers. You can add normalize to your page by creating a CSS document with the normalize code on it, then linking that document in your HTML under your <head> section.

here is teamtreehouse's video that teaches you about normalize. https://teamtreehouse.com/library/applying-normalizecss-browser-reset-css

here is a link to the normalize code: https://necolas.github.io/normalize.css/4.1.1/normalize.css

as far as the space around your header, you may run into problems with spacing in regards to any divs or perhaps navigation that runs along the bottom. If you're having difficulties there, you could implement a clearfix into your site.

here is a link to that video :) https://teamtreehouse.com/library/css-layout-techniques/float-layout/the-float-clearfix

So, without seeing your site in real time, I feel like these will fix your problem.

happy coding

-K