Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

header stretches instead of

header stretches instead of


To make a long story short, the Header class should be a black line across the entire screen. In HTML it will be a list. The list's children will be styled as buttons and should begin after the first 20% of the page. Somewhere along the line this is going terribly wrong, because:

  1. The list children aren't styled at all (the margin)

  2. The page Stretches itself a lot.

Here is the entire source code:

Problem courtesy of: Bloodcount


A few issues that I see:

  • .header:first-child is applied to the
      , so change it to .header>li:first-child and that will target the first
    • and set its left margin
    • You set your font size to 3% in .header and the
    • inherit that, make sure that is what you want
    • set padding:0 on .header as well to prevent the horizontal scrollbars.

    Here's a Fiddle for you to look at. I've put red borders around the

  • and text so you can see them.

    Solution courtesy of: emgee
  • Discussion

    View additional discussion.

    This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

    Share the post

    header stretches instead of


    Subscribe to Css3 Recipes - The Solution To All Your Style Problems

    Get updates delivered right to your inbox!

    Thank you for your subscription