Grid gallery горизонтальная прокрутка

Надо сделать во весь экран галерею, с помощью грид так что бы картинки были responsive, но картинки очень большие и у меня появляется горизонтальная прокрутка как исправить? Выгрузил на хостинг (http://sizovleonid.ru/Ski%20&%20Snowboard%20School/)

html:

  <section id="gallery">
   <div class="container">
      <div class="gallery">
         <div class="gallery-block one">
            <img src="Img/gallery/max-kukurudziak-607806-unsplash.png" alt="">
         </div>
         <div class="gallery-block two">
            <img src="Img/gallery/sports-2982378_1920.png" alt="">
         </div>
         <div class="gallery-block three">
            <img src="Img/gallery/Contrast_2.png" alt="">
         </div>
         <div class="gallery-block four">
            <img src="Img/gallery/fezbot2000-783167-unsplash.png" alt="">
         </div>
         <div class="gallery-block five">
            <img src="Img/gallery/snowboard-113784_1920.png" alt="">
         </div>
         <div class="gallery-block six">
            <img src="Img/gallery/naomi-hutchinson-409309-unsplash.png" alt="">
         </div>
         <div class="gallery-block seven">
            <img src="Img/gallery/joshua-reddekopp-217223-unsplash.png" alt="">
         </div>
      </div>
   </div>
</section>

css:

#gallery {
    .container {
        padding: 0;
        .gallery {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            .one {
                grid-column: 1/2;
                grid-row: 1/2;
            }
            .two {
                grid-column: 2/3;
                grid-row: 1/2;
            }
            .three {
                grid-column: 3/4;
                grid-row: 1/3;
            }
            .four {
                grid-column:1/2;
                grid-row: 2/4;
            }
        }
    }
}