Как сделать такой блок?

Question

[LolExtasy]

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

Comments

[Максим]

конкретно где тут видно что что то выходит за блок ?

[FeST1VaL]

а в чем проблема именно? делаете wrapper внутри center с шириной контентой части и усе

[LolExtasy]

Много Чего, обновил фотку

[Максим]

LolExtasy, да блин... ни чё тама не выходит ... всё в своём потоке

[historydev]

Много Чего, чёт совсем курсы дряхлые делать стали xC

[LolExtasy]

Много Чего, синий блок, левая часть

[FeST1VaL]

LolExtasy, побыстрому накидал

[Ankhena]

Абсолютное позиционирование не подходит.

Чем оно вам не подходит?
Псевдоэлементом с абсолютом и отрицательным z-index.

Если совсем не подходит, значит, делайте доп обертку и ей ширину через calc

[Максим]

LolExtasy, это грубо но вот так: https://codepen.io/topicstarter/pen/zYKVJaJ

[LolExtasy]

Много Чего, смотри про отступ справа. суть в том что сам этот блок должен находится в контейнере, но левая часть как вы видите (надеюсь) выходит за контейнер.

[Максим]

LolExtasy, нет - не выходит - это такой эффект - новичкам голову ломает, весь макет покажите - желательно ссылку на макет

[Максим]

LolExtasy, вот такая структура

<div class="items">
  <div class="container">
    <h3></h3>
    <div class="flex">
      <div class="flex-outer"></div>
      <div class="flex-outer"></div>
    </div>
  </div>    
</div>

<div class="items">
  <div class="container">
    <h3></h3>
    <div class="flex">
      <div class="flex-outer"></div>
      <div class="flex-outer"></div>
      <div class="flex-outer"></div>
      <div class="flex-outer"></div>
    </div>
  </div>      
</div>

[LolExtasy]

Много Чего, блин, я тут накатал свой вариант, как тебе?))клик

[Максим]

LolExtasy, нормально но вот так посмотри: https://codepen.io/topicstarter/pen/GRjbYOE - хотя там на фоне картинка должна быть

[LolExtasy]

Много Чего, Спасибо за помощь ;)

Answer 1

[Toy Boy]

Походит, что именно хочешь сделать? Не понял суть вопроса...

Comments

[LolExtasy]

Уже вопрос решен, спасибо

[Toy Boy]

ок

Answer 2

[Уктам Хамидов]

.section>.container>.section__wrapper
Фон задаешь классу .section, а весь контент прописываешь внутри section__wrapper.