Horizontally stretch div in one direction only

Question

I'm working on a responsive layout that is basically boxed on the right side so the banner area runs flush with the sidebar/aside for desktop and wide views.

I can't seem to get it flush on the right side without making the width of the container fixed width, which means even a 1px difference in browser width makes it hang over or not span far enough.

Any suggestions? I have a jsfiddle with my markup here: http://jsfiddle.net/MtQ5J/

Here is the specific html markup:

        <div class="hero-container">
         <div class="hero wrapper clearfix">
            <h2>
                We thrive on solving other people’s problems in a collaborative setting.<br />
                This means starting by understanding the client’s needs and goals.<br />
                Listening to and understanding our clients is the key to how we work.  
            </h2>
         </div>
        </div>

It's H5BP, Normalize, and mobile first.

Example screenshot:

UPDATE

I added a container around the header, closed it before the hero area, then re-opened for the main content. I then floated a empty div next to the hero @ 20% width, set the hero to 80% width.. this kind of works but I would have to MQ it to death to get it perfect.. still looking for a more "fluid" solution if possible!

jsfiddle updated

Answer 1

Add this rule to your CSS:

body{
margin:0;
padding:0;
}

JSFiddle Demo

JSFiddle Code

Answer 2

Is this any help to you?
http://jsfiddle.net/panchroma/5kpkc/

The only change I've made is that I've added

.main.wrapper{
    float:right;
} 

to the CSS so that the wrapper class floats to the right instead of being centred on the page.

You might need to refine this some more with media queries if you want more control over the layout of the aside as the viewport narrows

Good luck!