.wrapper
  .container
    p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia delectus, sit nemo, eaque temporibus odit beatae quas nesciunt vero, voluptate aspernatur debitis repellat. Mollitia nulla accusamus error, doloribus ea, quibusdam!
    figure.full-width
      .inner
        img(src='https://images.unsplash.com/photo-1467348733814-f93fc480bec6?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=2635f17894dffc22d8073624dad76875')
    p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia delectus, sit nemo, eaque temporibus odit beatae quas nesciunt vero, voluptate aspernatur debitis repellat. Mollitia nulla accusamus error, doloribus ea, quibusdam!

$canvas-width = 680px
$ultra-length = 20000px

*, *:after, *:before
  padding: 0
  margin: 0
  box-sizing: border-box

html, body
  width: 100%
  height: 100%
  
.wrapper
  width: 100%
  overflow-x: hidden
  
.container
  width: 100%
  max-width: $canvas-width
  margin: 0 auto
  
  .full-width
    margin-left: -($ultra-length)
    margin-right: @margin-left
    background-color: red
    
    @media screen and (max-width: ($canvas-width - 1px))
      margin: 0
      
    .inner
      max-width: $canvas-width
      width: 100%
      margin: 0 auto
      
    img
      display: block
      width: 100%