div內的元素，但不能在視圖中滾動

Question

我正在使我的應用移動設備響應，因此我爲某些CSS添加@media查詢。我有一個包含圖片和相應名稱列表的div，但在視圖中它不會從第一張圖片開始。它將根據屏幕大小在6/7開始。任何想法如何解決這一問題？

HTML

<div class="left"> 
      <div class="profTemp"> 
      <img src="https://s-media-cache-ak0.pinimg.com/736x/24/28/10/242810087197ad884c0d895c2953a740.jpg" width="40" height="40" /> 
      <span>Frank Ocean</span> 
      </div> 

      <div class="profTemp"> 
      <img src="https://i1.sndcdn.com/avatars-000275328494-x0ummz-t500x500.jpg" width="40" height="40" /> 
      <span>Connie Constance</span> 
      </div> 


      <div class="profTemp"> 
      <img src="https://www.tinymixtapes.com/sites/default/files/imagecache/Article_Width/1412/artworks-000097529084-s9nava-t500x500.jpg" width="40" height="40" /> 
      <span>NAO</span> 
      </div> 
      <div class="profTemp"> 
      <img src="https://i1.sndcdn.com/avatars-000282552589-ewmqcs-t500x500.jpg" width="40" height="40" /> 
      <span>Brent Faiyaz</span> 
      </div> 

      <div class="profTemp"> 
      <img src="https://cdn-s3.allmusic.com/release-covers/500/0004/624/0004624822.jpg" width="40" height="40" /> 
      <span>Solange</span> 
      </div> 


      <div class="profTemp"> 
      <img src="https://brightsidelive.com/wp-content/uploads/earl-sweatshirt.jpg" width="40" height="40" /> 
      <span>Earl Sweatshirt</span> 
      </div> 
      <div class="profTemp"> 
      <img src="https://68.media.tumblr.com/5e687ecaa7e8bae1e20e9c80e51185ad/tumblr_o5tp3ucSMB1rtauc1o1_500.jpg" width="40" height="40" /> 
      <span>Skepta</span> 
      </div> 
      <div class="profTemp"> 
      <img src="https://s3.amazonaws.com/bucketeer-373b822b-859a-491c-934d-506d803eb341/artist/vfd9Q9nlJ8adbEtVW9o1nezrbx5Km3Nip3w978xR" width="40" height="40" /> 
      <span>Ray Blk</span> 
      </div> 
      <div class="profTemp"> 
      <img src="https://www.tinymixtapes.com/sites/default/files/imagecache/Article_Width/1412/artworks-000097529084-s9nava-t500x500.jpg" width="40" height="40" /> 
      <span>NAO</span> 
      </div> 
      <div class="profTemp"> 
      <img src="https://i1.sndcdn.com/artworks-000128440509-uqhyuv-t500x500.jpg" width="40" height="40" /> 
      <span>Rex Orange County</span> 
      </div> 
      <div class="profTemp"> 
      <img src="https://s-media-cache-ak0.pinimg.com/originals/09/b7/27/09b727b145efb31556e50fb5ecbd0774.jpg" width="40" height="40" /> 
      <span>King Krule</span> 
      </div> 
      <div class="profTemp"> 
      <img src="https://i1.sndcdn.com/avatars-000210207184-xy9abz-t500x500.jpg" width="40" height="40" /> 
      <span>Jamie Isaac</span> 
      </div>    
      <div class="profTemp"> 
      <img src="https://68.media.tumblr.com/3e2529b6651bc7c91683192af22339a8/tumblr_oo0tyzV1Fl1tc0atto1_500.jpg" width="40" height="40" /> 
      <span>Adwoah Aboah</span> 
      </div> 

      <div class="profTemp"> 
      <img src="https://s3.amazonaws.com/beatstarsdata/b.user.data/w/westweekend-152110/gfx/cover-artwork/238117_med_.jpg" width="40" height="40" /> 
      <span>Tyler</span> 
      </div> 
      <div class="profTemp"> 
      <img src="https://dontfckabout.files.wordpress.com/2016/10/yeah-yeah.jpg?w=730" width="40" height="40" /> 
      <span>Jesse James Solomon</span> 
      </div> 
      <div class="profTemp"> 
      <img src="https://i1.sndcdn.com/artworks-000166667136-5heltz-t500x500.jpg" width="40" height="40" /> 
      <span>Snoochie Shy</span> 
      </div> 
      <div class="profTemp"> 
      <img src="https://thumbnailer.mixcloud.com/unsafe/300x300/extaudio/5/3/e/9/0648-ec8e-4d76-923e-1b837ea94eb2.jpg" width="40" height="40" /> 
      <span>Sofie Fatouretchi</span> 
      </div> 

      <div class="profTemp"> 
      <img src="https://68.media.tumblr.com/9bd38039b2ed72c3f8f79b5841c0248c/tumblr_oion4yG1a21rb7lvjo1_500.jpg" width="40" height="40" /> 
      <span>Steve Lacy</span> 
      </div> 
      <div class="profTemp"> 
      <img src="https://68.media.tumblr.com/f281802a37d7ada6b610ad31a862543e/tumblr_nstvm65CZ81r2mlhzo1_500.png" width="40" height="40" /> 
      <span>Lisa Bonet</span> 
      </div> 

     </div> 

CSS

.grid 
{ 
    display: grid; 
    grid-template-rows: 90px 70% 4.5%; 
    background-color: black; 
    grid-template-columns: 100%; 
    grid-row-gap: 0px; 
    overflow: hidden; 
} 

.left 
{ 
    grid-row: 1; 
    overflow-x: auto; 
    overflow-y: hidden; 
    background-color: #242424; 
    grid-column: 1; 
    display: flex; 
    justify-content: center; 
    text-align: center; 
    color: white; 
} 

Answer 1

在你的 「左」 類，證明內容向左

justify-content: left;