Полная ширина области просмотра

На моем сайте я стараюсь, чтобы мои изображения заполняли ширину видового экрана только на мобильных устройствах, но с сетками там отступы, поэтому, когда на мобильном телефоне есть этот бит белого пространства с обеих сторон.

Пример. На веб-сайте Microsoft при изменении размера браузера отступы удаляются по основному изображению и заполняют ширину окна просмотра, но миниатюры сохраняют свои прокладки. То, что я пытаюсь достичь, - это то, что происходит на главном изображении.

Разметка:

<div class="container">
  <section class="row cf">
    <div class="grid-full">
        <article>
          <img src="/path/to/image/sample.jpg" />
        </article>
    </div>
  </section>
</div>

CSS:

.container {
  max-width: 1000px;
  width:92%;
  margin:0px auto;
  position: relative;
}

.grid-full {
  float: left;
  width:96.969696969697%;
  margin:0 1.515151515152% 1em;
}

Я пробовал играть с заполнением, разметкой и шириной, но мне не удалось.