CSS - how to overflow from div to full width of screen

Question

I have a containing DIV, that I use as part of my responsive grid. It expands to the maximum width I allow which is 1280px, then margins appear for large devices. Here\'s my

Answer 1

I found this super useful trick by using vw on margins (Source)

Example :

.inner-but-full {
   margin-left: calc(-50vw + 50%);
   margin-right: calc(-50vw + 50%);
}

Demo :

html,body {
  overflow-x: hidden; /* Prevent scrollbar */
}

.inner-but-full {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  height: 50px;
  background: rgba(28, 144, 243, 0.5);
}

.container {
  width: 300px;
  height: 180px;
  margin-left: auto;
  margin-right: auto;
  background: rgba(0, 0, 0, 0.5);
}

Can I use :

http://caniuse.com/#feat=calc

http://caniuse.com/#feat=viewport-units