How to make child exceed parent width properly?

Question

I have a parent (container) and a child (an h1 header/block).

.container {
    width: 1024px;
}
#h1 {
    width: 1024px;
    padding: 0 30px 0 30px;
    background-color: something;
}

The problem is for some reason, instead of stretching out of the parent 30 pixels to the left and 30 pixels to the right, it stretches out 60 pixels to the right. Right now I just set a negative left margin of -30px to pull it back and make it even, but I was wondering if there is a better/proper way to do it?

This is a picture of what happens:

This is a picture of what I want it to look like (and got it to look like with negative margin):

Answer 1

The negative margin is the only way to go in this case really (and is one of the few cases where I'd consider it acceptable use).

There are other solutions you could explore (e.g. have the red bg set as a centrally aligned bg image, then have div's with padding for content outside the h1) but there's really no bonus to doing this over using a negative margin, in fact long term it's less maintainable.

As has already been suggested, you could also use positioning to resolve this (see example below).

HTML:

<div class="container">
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <h1>testing, testing, 1 2 3</h1>
</div>

CSS:

.container {
    background: #f00;
    margin: 0 0 0 20px;
    padding: 100px 0;
    position: relative;
    width: 400px;
}

h1 {
    background: #00f;
    color: #fff;
    left: -20px;
    padding: 0 20px;
    position: absolute;
    width: 100%;
}

http://jsfiddle.net/d7KJ9/4/

Unfortunately though adding content after the h1 seems to break this method:

http://jsfiddle.net/d7KJ9/2/

Furthermore, if the above method did work, it wouldn't necessarily be any better than using a negative margin (it actually involves more CSS).

In conclusion, just go the negative margin solution, negative margins aren't necessarily a bad thing when used appropriately, just reason with yourself before using them (is there a better way to accomplish what you want?)