DIV не отображает горизонтальную полосу прокрутки

Я пытаюсь заставить DIV отображать только горизонтальную полосу прокрутки. Я заполняю DIV множеством изображений и хочу, чтобы пользователь мог прокручивать по горизонтали.

Но у меня две проблемы:

Один учебник, который я прочитал, дал мне некоторый код (которого у меня больше нет), который говорит, что отобразит полосу прокрутки. Но это не так. И это также заставило изображения появляться ниже друг друга. Поэтому я отказался от этого кода.

Другой учебник дал мне «взгляд», который я хотел, но без полос прокрутки . Но появлялись полосы прокрутки!

Как я могу получить DIV, полный фото и горизонтальную полосу прокрутки?

Вот что я до сих пор:

CSS: (dude.css)

.EditorialImagePaneOne { width: 500px -ms-overflow-x:scroll; overflow-x:scroll; white-space:nowrap; } .ShowcaseImage { height: 407px; } 

HTML: (Index.html)

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="../Assets/CSS/dude.css" /> <title></title> </head> <body> <div class="EditorialImagePaneOne"> <img src="../Assets/Images/Editorial/1-1.jpg" class="ShowcaseImage" /> <img src="../Assets/Images/Editorial/1-2.jpg" class="ShowcaseImage" /> <img src="../Assets/Images/Editorial/1-3.jpg" class="ShowcaseImage" /> <img src="../Assets/Images/Editorial/1-4.jpg" class="ShowcaseImage" /> <img src="../Assets/Images/Editorial/1-5.jpg" class="ShowcaseImage" /> <img src="../Assets/Images/Editorial/1-6.jpg" class="ShowcaseImage" /> <img src="../Assets/Images/Editorial/1-7.jpg" class="ShowcaseImage" /> <img src="../Assets/Images/Editorial/1-8.jpg" class="ShowcaseImage" /> </div> </body> </html>