Как реализовать блок шириной больше .container?

Question

[eugene112]

Добрый вечер, я только учусь вёрстке и во втором моём проекте попался такой макет, всё довольно просто, за исключением блока с зелёным фоном, кнопки для переключения карусели расположены по краям макета(его ширина составляет 1920px), за шириной сетки, как в таком случае описать подобный блок? Ведь на девайсах с шириной дисплея меньше 1920px кнопки не влезут на страницу? Также интересно как это решается при использовании Bootstrap.

Comments

[jamster]

Макет кривой, ищи другой, :)

Answer 1

[Neyury]

<header>
    <div class="wrapper">
        контент
    </div> 
</header>
<div class="green">
    <div class="wrapper">
        контент
    </div> 
</div> 
<div>
    <div class="wrapper">
        контент
    </div> 
</div>

.wrapper{
    width: 1200px;
    margin: 0 auto;
}

Answer 2

[Антон Спирин]

Можно так:

<header>
  <div class="container">
    <!-- Header stuff -->
  </div> 
</header>
<main>
  <div class="container">
    <!-- Optional stuff -->
  </div>
  <div class="big-green-block">
    <!-- Big green block stuff -->
  </div>
  <div class="container">
    <!-- Some other stuff -->
  </div>
<main>

Answer 3

[eugene112]

Всё оказалось гораздо проще, чем можно было себе представить, спасибо за ответ.