Как использовать контейнер-центровщик в вёрстке, если иногда контент должен "выпадать" из него?

xmoonlight, спасибо, теперь ясно ) !

Как использовать контейнер-центровщик в вёрстке, если иногда контент должен "выпадать" из него?

Тоже вариант, спасибо )

Как использовать контейнер-центровщик в вёрстке, если иногда контент должен "выпадать" из него?

xmoonlight, вы мне предлагаете сделать так?

<header>
  <div class="container">
    <div class="wrap-for-mobile">
      <a class="logo">
        <img src="">
      </a>
    </div>
    <nav>
      <ul></ul>
    </nav>
  </div>
</header>

@media (min-width: desktop) {
  .container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
  }
}

@media (min-width: mobile) {
  .container {
    display: flex;
    flex-direction: column;

    width: 100%;
    padding: 0;
    margin: 0;
  }
  
  .wrap-for-mobile {
    padding: 0 20px;
  }
}

Как использовать контейнер-центровщик в вёрстке, если иногда контент должен "выпадать" из него?

На мобильной версии логотип должен находится в рамках центровщика, в то время как пункты меню с его border-bottom, border-top должны тянуться на весь экран, как мне это реализовать, если навигация также лежит в контейнере, а он своими паддингами отталкивает её от краёв экрана?

Как использовать контейнер-центровщик в вёрстке, если иногда контент должен "выпадать" из него?

Не понимаю зачем мне добавлять ещё один враппер внутрь центровщика, а сам центровщик всегда растягивать на всю ширину, если у меня это так и работает только header тянется на всю ширину, а container центрует контент - 2-е разные области с независимым поведением. Объясните пожалуйста поподробнее.