Escape the bounds of a div container

EDIT (2019): There is a new trick to get a full bleed using this CSS utility:

width: 100vw;
margin-left: 50%;
transform: translateX(-50%);

---

I guess all solutions are kind of outdated.

The easiest way to escape the bounds of an element is by adding:

    margin-left: calc(~"-50vw + 50%");
    margin-right: calc(~"-50vw + 50%");

discussion can be found here and here. There is also a nice solution for the upcoming grid-layouts.

If you just want the background of the element to extend across the whole page this can also be achieved with negative margins.

In a nutshell (correction from comment):

.bleed {
padding-left: 3000px;
margin-left: -3000px;
padding-right: 3000px;
margin-right: -3000px;
}

That gives you horizontal scroll bars which you remove with:

body {overflow-x: hidden; }

There is a guide at http://www.sitepoint.com/css-extend-full-width-bars/. It might be more semantic to do this with psuedo elements: http://css-tricks.com/full-browser-width-bars/