остановить переполнение HTML-элемента img

Question

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

Четвертое изображение должно останавливаться на той же оси, что и красный блок над ним.

Имеет ли это смысл?

<div style="margin: 0 15px;height: 40px; background-color: red">

</div>
<div style="padding: 0 15px;height: 400px;white-space: nowrap;overflow: hidden;">
  <img src="http://placekitten.com/g/200/200">
  <img src="http://placekitten.com/g/200/200">
  <img src="http://placekitten.com/g/200/200">
  <img src="http://placekitten.com/g/200/200">
  <img src="http://placekitten.com/g/200/200">
  <img src="http://placekitten.com/g/200/200">
</div>

Answer 1

Используйте margin вместо padding.

<div style="margin: 0 15px;height: 40px; background-color: red">

</div>
<div style="margin: 0 15px;height: 400px;white-space: nowrap;overflow: hidden;">
  <img src="http://placekitten.com/g/200/200">
  <img src="http://placekitten.com/g/200/200">
  <img src="http://placekitten.com/g/200/200">
  <img src="http://placekitten.com/g/200/200">
  <img src="http://placekitten.com/g/200/200">
  <img src="http://placekitten.com/g/200/200">
</div>