I've been presented with the following layout:

![Page layout](https://i.stack.imgur.com/VzVRz.png)

where:

* A = header, `width: 100%`
* B = page content, `max-width: 960px; margin: 0 auto`
* C = footer, `width: 100%`

The problem I've got is with the H1. The design has a background to the H1 which comes in from the very far left of the screen and stretches all the way across to line up with the right hand side of the content below. If the browser window is less than 960px then obviously it just appears as a solid bar stretching across the whole screen.

I'm genuinely at a loss for how to even start this. I thought about some kind of negative left margin + padding left but without knowing a fixed size it's hard to rely on percentages to accurately line up the elements.

The closest I think I've come to a solution is to have a massive background image which is centred on the H1, or maybe on a container surrounding the H1. Not ideal as it's just a solid colour so to use an image goes against my moral judgement.

Any ideas? [Here's the structure of the page](http://jsfiddle.net/MrChris2013/duFnR/):

```
<header>
    <h1>This is my title</h1>
</header>
<article></article>
<footer></footer>

```

CSS

```
header,
footer {
    width: 100%;
    min-height: 100px;
    background: #eee;
    overflow: hidden;
}

article {
    margin: 0 auto;
    max-width: 500px;
    height: 100px;
    background: #ddd;
}

h1 {
    margin: 30px auto;
    width: 500px;
    background: #bbb;
}

```