css - スライダーの画像が反応しないのはなぜですか?

Question

問題は、その幅が 20000em の ul.gallery にあるようです。

残りの div のサイズが変更されても、画像は変更されません。

ここにライブテストがあります。（編集：リンクを削除）

何か助けてください。

#container div.school {
  background: white;
  color: #333333;
  float: left;
  position: relative;
  overflow: hidden;
  max-width: 800px;
}

#container div.school ul.gallery {
  float: left;
  width: 20000em;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

#container div.school ul.gallery li {
  float: left;
  width: 800px;
}

#container div.school ul.gallery li .image {
  max-width: 600px;
  margin: 0 auto;
}

#container div.school ul.gallery li .image img {
  width: 100%;
  height: auto;
}

<section id="schools">
  <div class="school" id="sass">
    <ul class="gallery">
      <li>
        <div class="image">
          <a class="swipebox" title="School of Arts and Social Sciences 1" href="http://s1.city.ac.uk/developer-assessment-2015/i/sass/01_2048x1396.jpg"><img class="thumbnail" src="http://s1.city.ac.uk/developer-assessment-2015/i/sass/01_tn.jpg" alt="School of Arts and Social Sciences 1" title="School of Arts and Social Sciences 1" width="600" height="409"></a>
          <div class="caption">School of Arts and Social Sciences 1</div>
        </div>
      </li>
    </ul>
    <a class="jcarousel-control-prev" href="#">‹&lt;/a>
    <a class="jcarousel-control-next" href="#">›&lt;/a>
    <div class="jcarousel-pagination"></div>
  </div>
</section>

編集: メディア クエリでビューポート幅を 100% に設定した後、画像のサイズが変更されるようになりました。