<main>
 
  <p>Kielbasa bacon boudin swine cow tri-tip shankle. Ham hock flank landjaeger porchetta, strip steak t-bone short loin beef chuck tri-tip kielbasa bresaola prosciutto hamburger bacon. Cow t-bone bresaola, swine ham bacon shankle ground round. Turkey pancetta sirloin, beef spare ribs boudin biltong pork frankfurter meatloaf jerky meatball bacon porchetta jowl.</p>
 
  <figure class='full-width'>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/62127/rfd-bots.png">
    <figcaption>Some text.</figcaption>
  </figure>
  
  <p>Kielbasa bacon boudin swine cow tri-tip shankle. Ham hock flank landjaeger porchetta, strip steak t-bone short loin beef chuck tri-tip kielbasa bresaola prosciutto hamburger bacon. Cow t-bone bresaola, swine ham bacon shankle ground round. Turkey pancetta sirloin, beef spare ribs boudin biltong pork frankfurter meatloaf jerky meatball bacon porchetta jowl.</p>
  
  <p>Kielbasa bacon boudin swine cow tri-tip shankle. Ham hock flank landjaeger porchetta, strip steak t-bone short loin beef chuck tri-tip kielbasa bresaola prosciutto hamburger bacon. Cow t-bone bresaola, swine ham bacon shankle ground round. Turkey pancetta sirloin, beef spare ribs boudin biltong pork frankfurter meatloaf jerky meatball bacon porchetta jowl.</p>
  
  <p>Kielbasa bacon boudin swine cow tri-tip shankle. Ham hock flank landjaeger porchetta, strip steak t-bone short loin beef chuck tri-tip kielbasa bresaola prosciutto hamburger bacon. Cow t-bone bresaola, swine ham bacon shankle ground round. Turkey pancetta sirloin, beef spare ribs boudin biltong pork frankfurter meatloaf jerky meatball bacon porchetta jowl.</p>
</main>

@mixin full-width($support-type: margin,$min-width:null){
  @if $support-type == 'margin' {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    // margin-left: calc(-100vw / 2 + #{$min-width} / 2);
    // margin-right: calc(-100vw / 2 + #{$min-width} / 2);
  }
  
  @if $support-type == 'position' {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }
  
  @if $support-type == 'translate' {
    width: 100vw;
    transform: translateX(calc((#{$min-width} - 100vw)/2));
  }
}
.full-width {
  @include full-width(margin,960px);
}

* {
  box-sizing: border-box;
}

/* This technique doesn't naturally cause horizontal overflow, but once there is natural vertical overflow, it causes horizontal overflow, so stopping here. */
body {
  overflow-x: hidden;
}


main {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

img {
  width: 100%;
  max-width: 100%;
}

p, figure {
  margin: 15px 0;
}
figcaption {
  text-align: center;
  color: #999;
}