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:
The list children aren't styled at all (the margin)
The page Stretches itself a lot.
Here is the entire source code:
A few issues that I see:
.header:first-childis applied to the
, so change it to
.header>li:first-childand that will target the first
and set its left margin
- You set your font size to 3% in
inherit that, make sure that is what you want
.headeras 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.
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here