调整ul后，在li子元素之间停止边距

Question

我有一个包含此列表项的有序列表

<li class="vjs-playlist-item vjs-up-next" tabindex="0">
 <div class="thumb-dur">
  <picture class="vjs-playlist-thumbnail">
   <source srcset="img/play1.png" type="image/png" media="(min-width: 400px;)">
   <img alt="" src="img/play1.png">
   <span class="vjs-playlist-now-playing-text" title="Now Playing">Now Playing</span>
  </picture>
  <time class="vjs-playlist-duration" datetime="PT0H0M45S">0:45</time>
 </div>
 <div class="vjs-playlist-title-container" style="display: inline-block;">
  <span class="vjs-up-next-text" title="Up Next">Up Next</span>
  <cite class="vjs-playlist-name" title="Ellie Goulding's Love me like you do 1">Ellie Goulding's Love me like you do 1</cite>
 </div>
</li>

当ol的最大宽度等于所有li的宽度时，它看起来很正常。这是它的样子

。

但是在媒体查询时，当我增加ul元素的大小时，它就像这样

我用谷歌搜索了这个问题大约2个小时但没有发现任何东西。任何人都可以帮忙。

这是我的css。

div.vjs-playlist {
  width: 402px;
  background: white;
  font:16px;
  overflow:hidden;
}

li.vjs-playlist-item {
  width:100%;
  height: 102px;
  padding-bottom: 8px;
}

li.vjs-playlist-item:hover {
  background: #45B39D;
}

div.vjs-playlist li.vjs-playlist-item {
  cursor: pointer;
  overflow: hidden;
  position: relative;
  margin-bottom: 0px;
}

div.vjs-mouse.vjs-playlist {
  font-size: 13px;
  background-color:white;
  color: black;
}

picture.vjs-playlist-thumbnail{
  max-width:168px;
  max-height: 94px;
  margin-right: 8px;
}

.vjs-playlist-thumbnail img{
  max-width:100%;
  max-height: 100%;
}

@media (min-width: 521px){
  div.vjs-playlist img {
    min-height: 94px;
  }
}

div.vjs-playlist img {
  display: block;
  width: 100%;
  min-height: 94px;
  height: auto;
}

time.vjs-playlist-duration{
  font-size: 16;
  font-family: proximanova-regular-webfont, arial;
  color: white;
}

div.thumb-dur{
    display:inline-block;
    max-width: 168px;
    max-height: 94px;
    margin:0;
}

div.vjs-playlist-title-container{
    width:226px;
    height: 94px;
    font-size: 16;
    font-family: proximanova-regular-webfont, arial;
    color:black;    
}

div.vjs-mouse.vjs-playlist div.vjs-playlist-title-container {
    position: relative;
    bottom: 0;
    padding: 0;
    text-shadow: none;
    vertical-align: top; /* It's custom*/
}

cite.vjs-playlist-name{
    text-shadow: none;
    font-size: 16;
    font-family: proximanova-regular-webfont, arial;
    color: black;
}

span.vjs-up-next-text{
    text-shadow: none;
    font-size: 16;
    font-family: proximanova-regular-webfont, arial;
    color: black;
}

@media (max-width:991px){
    div.video-js {
        margin-bottom: 15px;
    }
}

@media (min-width: 600px){
    div.vjs-mouse.vjs-playlist div.vjs-playlist-title-container {
    position: relative;
    bottom: 0;
    padding:0;
    text-shadow: none;
}
}

.vid-wrapper[max-width~="1279px"]{
    text-align: center;
}

.vid-wrapper[max-width~="1279px"] .vidinfo-container{
    max-width:854px;
    width:854px;
    margin-top: 15px;
}

.vid-wrapper[max-width~="1279px"] div.vjs-playlist{
    width:100%;
}