Padding messing up Header Bar

I think you’ve just stated what I was saying and the solution would be to add 15px (or whatever) of horizontal padding to the box and then the header bar would have negative margins of 15px. If you use the code I already provided it will work everywhere with no problem. You could use em padding on the box but then you’d need to work out what the negative margin of the header bar will be because its font-size is different. Even if you work it out on a calculator it will likely always be 1px out because ems are rounded measurements and not exact like pixels. In a tight space like that I would always use pixel padding.

The choice is yours.:slight_smile:

Actually, you could have it simpler than that if you don’t want to use negative margins on the h2 by grouping all elements you’re going to use for the boxes.

You could remove the left and right padding from .box and add it to all inner elements you’ll be using. Yes, that is more work, but if you group them together, then you’ll always have a single instance where to change them, like so:

.box p, .box dl, .box dt, .box dl, .box ol, .box ul, .box table, .box blockquote, .box h3, .box h4, .box h5 {
    padding: 1em;
}

That way you have a single instance you’d need to change should the need arise and you can keep your initial HTML structure.

Great minds think alike! :smiley:

Thanks,

Paul