Сейчас я расскажу и покажу как решить эту задачу за 8 шагов. Задание не сложное, я попытался решить его поигравшись марджинами, но потом почти истратив все попытки проверок, я психанул и просто обнулил шрифт 
Итак начнем.
Шаг 1: поскольку котогалерея нам нужна на inline-block, мы зададим режим отображения элементов галереи.
.gallery .item {
width: 125px;
margin: 0 10px;
margin-bottom: 10px;
display: inline-block; - шаг 1.
font-size: 12px; - шаг 8 (пояснение в конце)
Шаг 2: выровняем все элементы по центру.
.gallery {
padding-top: 10px;
text-align: center; - шаг 2
font-size: 0; - шаг 7 (пояснение в конце)
}
Шаг 3: Выровняем описание элементов по левому краю
.gallery .title {
margin-bottom: 5px;
line-height: 14px;
text-align: left;
}
Шаг 4: Расширим нашу рамку сверху и добавим обводку границ.
.gallery .frame {
background: #ecf0f1;
padding-top: 10px;
border: 1px solid black;
}
Шаг 5: Добавим обводку границ сверху и снизу нашим изображениям внутри рамки.
.gallery .image {
height: 70px;
background-position: 50% 50%;
background-repeat: no-repeat;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
Шаг 6: Добавим внутренние отступы со всех сторон и выравнивание по левому краю для даты.
.gallery .date {
font-style: italic;
font-size: 11px;
color: #666666;
padding: 5px;
text-align: left;
}
Шаг 7 и 8 Теперь чтобы правильно разместить “Кота, который мурлыкал”, что вечно сдвигается не хочет стоять там где ему нужно, мы обнулим шрифт у контейнера с классом gallery, что служит родителем для инлайн-блоков задав ему свойство font-size: 0; а самим инлайн-блокам зададим исходный размер шрифта font-size: 12px; как сказано в уроке 31 курса «Сетки».
Готово! Задание выполнено на 100%. Как всегда рад буду услышать различные мнения и способы улучшить, упростить код. Спасибо за внимание.
