Aligning images horizontally

Hello!
I think this must be an easy thing to do but I haven’t figured it out. Can you tell me how to align images horizontally? I have 7 images I want to line up on a desktop. Ideally, I’d like them to stay in one line from desktop to tablet but just have the images reduce in size. Then, when I get to mobile, they would go back to their original size and align vertically.

I tried a hack with styles that works for all but the mobile part. The images just keep reducing in size and staying on the horizontal which makes them too small for mobile. Is there an easy way to do this?

If interested, here’s what I did:

HTML:
<h2 style=”text-align: center;”>VENUES</h2>
<div class=”inaline”>
<div class=”inside”></div>
<div class=”inside”></div>
</div>

CSS:
#top.page-id-241 .inaline {
white-space: nowrap;
max-width: 100%;
}
#top.page-id-241 .inside {
width: 14%;
display: inline-block;
text-align: center;
vertical-align: middle;
}
#top.page-id-241 .inaline img {
max-width:100%;
}

Thanks!