我的div向左浮动，所有宽度为33：33％，并且无法正确显示。我不知道为什么。
这是页面演示：
https://tobiasnielsendesigns.com/doxafilm/film/
代码如下：
.mpp-playlist-item {
position: relative;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: auto;
overflow: hidden;
touch-action: pan-y;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
list-style: none;
text-decoration: none;
float: left;
width: 33.33%
}
.mpp-playlist-item .mpp-thumb,
.mpp-playlist-item .mpp-image {
position: relative;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
}<div class="mpp-playlist-content">
<div class="mpp-playlist-item" data-thumb="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47571818_275651269807296_726827746314944512_n.jpg" data-hover-type="video" data-hover-path="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/Chaplon-Tea-in-English-2.mp4"
data-title="Chaplon" data-target="_blank" style="margin: 0px;width: 33.3333%;">
<div class="mpp-media-content mpp-hover-media"><img class="mpp-thumb mpp-visible" alt="" src="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47571818_275651269807296_726827746314944512_n.jpg"></div>
</div>
<div class="mpp-playlist-item" data-thumb="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47432813_1904362906349022_3286639803898003456_n.jpg" data-hover-type="video" data-hover-path="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/10/Lighting-Metropolis.mp4"
data-title="Lighting metropolis" data-target="_blank" style="margin: 0px; width: 33.3333%;">
<div class="mpp-media-content mpp-hover-media"><img class="mpp-thumb mpp-visible" alt="" src="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47432813_1904362906349022_3286639803898003456_n.jpg"></div>
</div>
<div class="mpp-playlist-item" data-thumb="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/CPH-book.jpg" data-hover-type="video" data-hover-path="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/Copenhagen-Book.mp4"
data-title="CPH Book" data-target="_blank" style="margin: 0px; width: 33.3333%;">
<div class="mpp-media-content mpp-hover-media"><img class="mpp-thumb mpp-visible" alt="" src="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/CPH-book.jpg"></div>
</div>
<div class="mpp-playlist-item" data-thumb="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47573179_752046408476410_3175606446800764928_n.jpg" data-hover-type="video" data-hover-path="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/11/Karamelleriet-1.mp4"
data-title="Karamelleriet" data-target="_blank" style="margin: 0px; width: 33.3333%;">
<div class="mpp-media-content mpp-hover-media"><img class="mpp-thumb mpp-visible" alt="" src="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47573179_752046408476410_3175606446800764928_n.jpg"></div>
</div>
<div class="mpp-playlist-item" data-thumb="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47477639_2245917819064779_8344583275250974720_n.jpg" data-hover-type="video" data-hover-path="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/Metropolis_-by-Light-conference.mp4"
data-title="Lighting metropolis konference" data-target="_blank" style="margin: 0px; width: 33.3333%;">
<div class="mpp-media-content mpp-hover-media"><img class="mpp-thumb mpp-visible" alt="" src="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47477639_2245917819064779_8344583275250974720_n.jpg"></div>
</div>
<div class="mpp-playlist-item" data-thumb="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47575800_297900987527222_8526911603403128832_n.jpg" data-hover-type="video" data-hover-path="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/IQ-tatoo.mp4"
data-title="IQ tatoo" data-target="_blank" style="margin: 0px; width: 33.3333%;">
<div class="mpp-media-content mpp-hover-media"><img class="mpp-thumb mpp-visible" alt="" src="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47575800_297900987527222_8526911603403128832_n.jpg"></div>
</div>
<div class="mpp-playlist-item" data-thumb="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47504614_1702949066679527_2100144376729567232_n.jpg" data-hover-type="video" data-hover-path="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/Bilfri-søndag.mp4"
data-title="Lets Go" data-target="_blank" style="margin: 0px; width: 33.3333%;">
<div class="mpp-media-content mpp-hover-media"><img class="mpp-thumb mpp-visible" alt="" src="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47504614_1702949066679527_2100144376729567232_n.jpg"></div>
</div>
<div class="mpp-playlist-item" data-thumb="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/11/Chaplon.png" data-hover-type="video" data-hover-path="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/Gate-21.mp4" data-title="Gate 21"
data-target="_blank" style="margin: 0px; width: 33.3333%;">
<div class="mpp-media-content mpp-hover-media"><img class="mpp-thumb mpp-visible" alt="" src="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/11/Chaplon.png"></div>
</div>
<div class="mpp-playlist-item" data-thumb="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47510101_596484184104977_2186712693870690304_n.jpg" data-hover-type="video" data-hover-path="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/Voksi-30-års-jubilæum.mp4"
data-title="Voksi" data-target="_blank" style="margin: 0px; width: 33.3333%;">
<div class="mpp-media-content mpp-hover-media"><img class="mpp-thumb mpp-visible" alt="" src="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47510101_596484184104977_2186712693870690304_n.jpg"></div>
</div>
<div class="mpp-playlist-item" data-thumb="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/11/Chaplon.png" data-hover-type="video" data-hover-path="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/Special-Hockey-Denmark.mp4"
data-title="Hockey" data-target="_blank" style="margin: 0px;width: 31.2%;">
<div class="mpp-media-content mpp-hover-media"><img class="mpp-thumb mpp-visible" alt="" src="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/11/Chaplon.png"></div>
</div>
<div class="mpp-playlist-item" data-thumb="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47440573_379353389306985_1037288684212191232_n.jpg" data-hover-type="video" data-hover-path="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/11/Trivsel-og-læring.mp4"
data-title="Lejre kommune " data-target="_blank" style="margin: 0px; width: 33.3333%;">
<div class="mpp-media-content mpp-hover-media"><img class="mpp-thumb mpp-visible" alt="" src="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47440573_379353389306985_1037288684212191232_n.jpg"></div>
</div>
<div class="mpp-playlist-item" data-thumb="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47316548_547574659049579_6114587764987002880_n.jpg" data-hover-type="video" data-hover-path="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/Bruunmunch.mp4"
data-title="Bruun Munch " data-target="_blank" style="margin: 0px;width: 31.3333%;">
<div class="mpp-media-content mpp-hover-media"><img class="mpp-thumb mpp-visible" alt="" src="https://tobiasnielsendesigns.com/doxafilm/wp-content/uploads/2018/12/47316548_547574659049579_6114587764987002880_n.jpg"></div>
</div>
</div>