Как сделать задний фон на весь экран html

Question

У меня все обернуто в контейнер, у которого определенная ширина. Но есть блок, который занимает всю ширину экрана. Я новичок и не особо понимаю как так сделать. Я пытаюсь сделать еще адаптив, если это как-то повлияет. Вот ccs контейнера

.container {
    max-width: 944px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding: 0px 10px;
}

Answer 1

.container для контента основного должен быть одинаковый
.container для header должен быть просто побольше

*, *::before, *::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-size: 30px;
  font-family: sans-serif;
}

.container {
  max-width: 600px;
  padding: 0 15px;
  margin: 0 auto;
  width: 100%;
  display: block;
}

.container_header {
  max-width: 800px;
}

.header {
  padding: 30px 0;
  background-color: orange;
}




.section {
  background-color: grey;
  padding: 80px 0;
}

.section__wrapper,
.header__wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.block {
  padding: 20px;
  background-color: white;
}

<header class="header">
  <div class="container container_header">
    <div class="header__wrapper">
      <div class="block">Header</div>
    </div>
  </div>
</header>

<section class="section">
  <div class="container">
    <div class="section__wrapper">
      <div class="block">Content</div>
      <div class="block">Content</div>
      <div class="block">Content</div>
    </div>
  </div>
</section>

БЛОГ НА HUSL

Как сделать задний фон на весь экран html

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