CSS: How to Create a Horizontal Screenshot Slider Div

I created a new landing page for a mobile app we were promoting. Since we wanted our page to come up in Google SERP and we had a version for iOS and Android, we wanted the landing page to be simple but also give visitors a sneak peek into the app just as you would find on the Apple iTunes Store or Google Play Store.

My solution uses css to transform a div into a horizontal scrolling window without the use of an iframe.

CSS

#screenshot-slider {overflow:auto;height:360px;background:#ccc;white-space:nowrap;padding:20px;}
#screenshot-slider img {display:inline-block;margin-right:15px;}

HTML

<h2>Screenshots</h2>
<div id="screenshot-slider">
<img height="300" alt="Mobile App Screenshot 1" src="app2017screenshot1.jpg" />
 
<img height="300" alt="Mobile App Screenshot 2" src="app2017screenshot2.jpg" />
 
<img height="300" alt="Mobile App Screenshot 3" src="app2017screenshot3.jpg" />
 
<img height="300" alt="Mobile App Screenshot 4" src="app2017screenshot4.jpg" />
 
<img height="300" alt="Mobile App Screenshot 5" src="app2017screenshot5.jpg" />
</div>