Я о том, что слева он выравнивается относительно контейнера, но справа уходит в overflow

Периодически в чатах всплывает вопрос - как сверстать картинку, которая выходит за пределы центрального контейнера.

Выдалась свободная минутка, решил сверстать пару шпаргалок. (Код не оптимальный, но рабочий, подумаю как можно улучшить).

Первый вариант:
Если жесткий центральный контейнер и картинку нужно сделать абсолютом
https://codepen.io/vitaliy_kirenkov/pen/zYrQONO

Второй вариант:
Если есть возможность одну секцию делать по центру, а другую вкрая
https://codepen.io/vitaliy_kirenkov/pen/BajeBdr

Предложения/пожелания писать в чат

второй вариант мне кажется не оч оптимальный и у меня развалился на ширине 5k

кажется его лучше сделать при помощи vw calc и float
но только в случае если изображения нельзя обрезать.

а если обрезарь можно то я бы бекграундами сделал ) тоже с vw и calc

Здравствуйте, ребят нужно сверстать две страницы

Кто готов реализовать отпишите в лс

ни сроков, ни цену, ни хотя бы примерно что нужно верстать говорить не нужно, конечно

В итоге человек с малыми знаниями подумал, что не потянет предполагаемую вёрстку с JS, а скилловый фронтендер подумал, что ты можешь платить 50 рублей за страницу и в итоге нормальный тебе никто не напишет 😕

Вы не понимаете эта другое

Господа, а не подскажите, почему-то box-shadow на нижней границе не отображается ?

Мб его перекрывает блок что ниже?

через  z-index можно пофиксить, но может есть другое решение?

Всем привет. Посоветуйте какую то css библитеку с flat design. Что то вроде http://preview.themeforest.net/item/flat-able-bootstrap-4-admin-template/full_screen_preview/19842250. Чтоб дока была и подключалось легко.

Или это монолитная серая полоса?

там три блока последовательно. Каждый следующий перекрывает предыдущий. Тут либо z-index, либо делать копию блоков и размещать над этими с прозрачными областями над серыми.

ок, сенкс

просто добавь в .box-shadow::defore z-index:2

Сделай красному position: relative; и дело в шляпе

Они и так там все relative )