Cacher is the code snippet organizer for pro developers

<div class="con">
  Container
</div>
<div class="foot">
 <div class="foot__inner">
  Footer 
 </div>
</div>

.con {
  width: 100%;
  max-width: 1000px;
  height: 200px;
  margin: 0 auto;
  background: #fc0;
}

.foot {
  width: 100%;
  position: relative;
}
.foot__inner {
  position: absolute;
  background: #090;
  right: 0;
  left: 50%;
  margin-left: -500px;
}
@media only screen and (max-width: 1000px) {
  .foot__inner {
    left: 0;
    margin-left: 0;
  }
}

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

.con {
  width: 100%;
  max-width: 1000px;
  height: 200px;
  margin: 0 auto;
  background: #fc0;
}

.foot {
  width: 100%;
  position: relative;
  
  &__inner {
    position: absolute;
    background: #090;
    right: 0;
    left: 50%;
    margin-left: -500px;
    
    @media only screen and (max-width: 1000px){
      left: 0;
      margin-left: 0;
    }
  }
}

<div class="con">
  Container
</div>
<div class="foot">
 <div class="foot__inner">
  Footer 
 </div>
</div>