Most of my content is inside a `<main>` element:

```
<main>
<h1>A nice big, long, long heading</h1>
<p>Lots of text</p>
</main>

main {
max-width:200px;
margin:0 auto;
padding:0 20px;
}

h1 {
position:absolute;
max-width:300px;
padding-right:20px;
}

```

This acheives this:

[![enter image description here](https://i.stack.imgur.com/FzYRX.png)](https://i.stack.imgur.com/FzYRX.png)

The heading is wider than the main column: it protrudes out of the right hand edge - exactly what I want.

However the text below the heading is displayed behind the heading (because the heading has been taken out of normal flow).

I don't know if the heading will be one or two lines or wrap on to more lines.

Is there a way to get the text beneath the heading to be displayed below the heading (not behind it): to respect the height of the heading (as if it was in normal flow)?