as soon as your div is inside a smaller parent, it will be hard to stretch it to browser-borders. what should work is using the full space and then center each item (except h2). You would need an extra span inside the h2 to hold the actual content.
The minified version:
<div id="wrapper">
<h2><span>This is a header/title</span></h2>
<p>This is the text.</p>
</div>
and
p {
width:500px;
margin:0 auto;
}
h2 {
width:50%;
overflow: hidden;
background: #FF8C00;
}
h2 span {
width: 250px;
float: right;
}
or in your style: http://jsfiddle.net/YW2ce/