Испытание 27/32 - Блок Menu

Курсы §15. Сетки
1

Испытание выполнил на 100%, долго думал как растянуть фон блока .menu, чтобы он выходил за пределы блока .layout-positioner, в итоге подсмотрел на форуме подходящее решение) Вопрос: можно ли как-то “проще” растянуть фон блока .menu на всю длину? Чтобы было без прописывания этому блоку длины, внутренних и внешних отступов в px…

<body>
    <div class="header background-color-darkblue">
      <div class="layout-positioner">
        <div class="logo background-color-red text-padding">
          Header
        </div>
        <div class="menu background-color-blue text-padding block-margin ">
          Menu
        </div>
        <div class="promo1 background-color-red text-padding block-margin">
          Promo 1
        </div>
        <div class="promo2 background-color-red text-padding block-margin">
          Promo 2
        </div>
      </div>
    </div>
    <div class="content">
      <div class="layout-positioner">
        <div class="left background-color-blue text-padding block-margin">
          Left
        </div>
        <div class="main background-color-blue text-padding block-margin">
          Main
        </div>
        <div class="right background-color-blue text-padding block-margin">
          Right
        </div>
      </div>
    </div>
    <div class="footer background-color-darkblue">
      <div class="layout-positioner">
        <div class="info text-padding">
          Footer
        </div>
      </div>
    </div>
  </body>

html,
body {
  margin: 0;
  padding: 0;
}

body {
  width: 450px;
  height: 335px;

  font-size: 10px;
  font-family: "Arial", sans-serif;
  color: white;
}

.background-color-darkblue {
  background-color: #34495e;
}

.background-color-red {
  background-color: #c0392b;
}

.background-color-blue {
  background-color: #3498db;
}

.text-padding {
  padding-top: 5px;
  padding-left: 5px;
}

.block-margin {
  margin-top: 10px;
  margin-bottom: 10px;
  
}

.layout-positioner {
  margin: 0 50px;
  padding-top: 0px;
}

.layout-positioner::after {
  content: "";
  display: table;
  clear: both;
}

.header {
  padding-top: 10px;
}

.header .logo {
  height: 30px;
}

.menu {
  width: 395px;
  height: 30px;
  margin-left: -55px;
  padding-left: 60px;
}

.promo1 {
  width:165px;
  height: 55px;
  float: left;
  margin-top: 0;
}

.promo2 {
  width:165px;
  height: 55px;
  float: right;
  margin-top: 0;
}

.left {
  width: 65px;
  height: 105px;
  float: left;
}

.main {
  width: 185px;
  height: 105px;
  float: left;
  margin-left: 10px;
}

.right {
  width: 65px;
  height: 105px;
  float: left;
  margin-left: 10px;
}

.footer {
  height: 35px;
}