Как посторить сетку с выходом контейнера

Question

Как мне построить такую сетку?

section {
  width: 100%;
  border: solid 1px red;
}

.container {
  width: 100%;
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  border: solid 1px red;
}

.slider {
  width: 100%;
  border: solid 1px red;
}

<section>
  0
  <div class="container">
    1
    <div class="slider">
      2
    </div>
  </div>
</section>

ps. вариант с ограничениям контейнера по {max-width:100%; padding-left:100px;padding-right:0;} не подойдёт.

Answer 1

Можно контейнеру дать width: 100%; а блок с картой прижать через margin вправо.

Answer 2

Принцип думаю понятен

section {
  border: solid 1px red;
}

header,
footer {
  padding: 0 20px;
}

.container {
  border: solid 1px red;
  padding: 40px 0;
}

.slider {
  padding: 20px;
  white-space: nowrap;
}

<section>
  <div class="container">
    <header>Header</header>


    <div style="overflow: scroll;">
      <div class="slider">
        0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0
      </div>
    </div>

    <footer>Footer</footer>
  </div>
</section>

БЛОГ НА HUSL

Как посторить сетку с выходом контейнера

Ответы (2 шт):