Position an image outside of it's container

Question

I'm struggling with working out how to get this to work.

I have an image inside a wide-header div. It's a responsive header, so the image is set to width:100% to make the banner resize to the size of it's container.

Problem is, the image needs to sit full width, but the container has a 10px margin on either side.

The HTML cannot change as it's CMS based. The banner must sit inside region-content with it's margin of 10px either side

I have successfully managed to push the image to the left most edge by using a position:relative on the image and placing it left:-10px to counter the left side gap.

Problem I am having is doing the same on the opposite side, as I cannot extend the width. The banner needs to be 20px wider... but it's set as a percentage based width so simply adding 20px doesn't work.

Essentially I need to work out how to get this to work as 100% + 20px.

It's for mobile so border-box:box-sizing could be used, but I cannot utilise this correctly, though I am sure a solution may require it.

JS Fiddle

HTML

<div id="region-content">
    <div class="content">
          <!-- HEADER IMAGE -->
            <div id="wide-header">
                <img src="http://i.telegraph.co.uk/multimedia/archive/02474/cat-eyebrows-1_2474686k.jpg" width="1400" height="475" alt="">
            </div>
    </div>
</div>

CSS

body{margin:0 auto;}

#region-content{
margin-left: 10px;
margin-right: 10px;
    outline:1px solid red;
}

#wider-header{
width: 100%;
box-sizing: border-box;
overflow: hidden;
max-height: 300px;
text-align: center;
background-color: #333;
}

#wide-header img {
width: 100%;
height: auto;
margin: 0 auto;
max-width: 1300px;
    position:relative;
    left:-10px;
}

Answer 1

Another way is to do the following (although you might have to look at your other content inside the #wide-header)

position:relative;
left:-10px;

to

position:absolute;
left:0;
right:0;

I have updated your fiddle http://jsfiddle.net/zr8xp/3/