Skeleton 画像を画面いっぱいで, 各ブラウザの端に表示したい

skeletonを利用してコーディングしています。

現在画像のようにマージンが取られている画像を、

このようにしたい

該当箇所では、
rowで横並びにした「コンテンツと画像」があり、右側の画像を画面端に表示させたいです。

ブラウザサイズを1370pxあたりより小さくすると、右側に画像がはみ出てしまい、
逆に1370pxよあたりより大きくすると、最初の画像のようにマージンが右側に取られてしまいます。

メディアクエリでskeletonで用意されている1000以上設定しているのですが、、、

どなたかお分かりになりますでしょうか？

...

  <div class="section position">
    <div class="container">
      <div class="row">
        <div class="six columns busposi-left-contents">
          <div class="busposi-headding">見出し</div>
          <p class="busposi-contents">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
        <div class="six columns big-phone">
          <img class="big-phone" src="images/right_big_iphone.png">
        </div>
      </div>
    </div>
  </div>
...

/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section {
  text-align: center;
}


/* Top
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.top {
  background-image: url('../images/top-catch.png');
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  padding: 8rem 0 7rem;
}

/* Intro
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.intro {
  background-color: #25C7AD;
  height: 70vh;
}
.intro.column {
  margin:auto;
}




/* Bigger than 1000 */
@media (min-width: 1000px) {
  /*Top */
  .top-headding {
    margin-top:56px;
    font-size:55px;
    font-weight: 700;
    color: #25C7AD;
  }
  .below-contents {
    margin-top:72px
  }
  .phone {
    max-height: 784px;
  }
  .qr {
    margin-top: -8px;
    max-height: 100px;
  }
  .top-subcopy {
    font-size:18px;
    font-weight: bold;
    color: #25C7AD;
  }
  .top-sumaho {
    font-size:24px;
    font-weight: bold;
    color:#FF7575;
  }
  /*Intro */
  .intro-headding {
    margin-top:56px;
    font-size:55px;
    font-weight: 700;
  }
  .intro-contents {
    margin-top:64px;
  }

  .busposi-headding {
    margin-top:56px;
    font-size:55px;
    font-weight: 700;
  }
  .busposi-contents {
    margin-top:64px;
  }
  .big-phone {
    max-height:100vh;
  }


}

補足

検証ツールでみたところ
container が960pxで定義されているようで、それが関係あるかもしれません。

skeleton.css
ここらへんいじってmax100%とかにしてみたんですが、container 960pxで変わりませんでした。

...
container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 80%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }
...