Контент меню по всей ширине страницы

.container { 
  width: 960px; 
  margin: 0 auto; 
} 
 
.navbar { 
  background: #ccc; 
} 
 
.navbar-inner { 
  height: 60px; 
} 
 
.menu { 
  max-width: 960px; 
  margin: 0 auto; 
  padding: 0; 
  position: relative; 
  display: flex; 
  list-style: none; 
  border: 3px dashed red; 
} 
 
.menu__item { 
  display: flex; 
  width: calc(100%/8); 
  text-align: center; 
} 
.menu__item:hover { 
  background: #7f8fa6; 
} 
 
.menu__link { 
  position: relative; 
  display: inline-flex; 
  justify-content: center; 
  flex: 1; 
  padding: 20px; 
} 
 
.submenu { 
  position: absolute; 
  top: 58px; 
  right: 0; 
  left: 0; 
  border: 3px dashed green; 
} 
 
.submenu:before { 
  content: ''; 
  position: absolute; 
  display: block; 
  width: 100vw; 
  height: 100%; 
  left: 50%; 
  right: 50%; 
  background: #95afc0; 
  transform: translateX(-50%); 
  z-index: -1; 
} 
 
.submenu-content { 
  margin: auto; 
}

<div class="container"> 
  <p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Журчит несколько свой, дорогу взгляд осталось на берегу встретил текста повстречался текстов! За, силуэт сбить? Толку, жаренные рыбными. Имеет, но жизни?</p> 
</div> 
<nav class="navbar"> 
  <div class="navbar-inner"> 
    <ul class="menu"> 
      <li class="menu__item"><a class="menu__link" href="#">item V</a> 
        <div class="submenu"> 
          <div class="submenu-content"> 
            <p>Это Подменю</p> 
            <p>с Шириной как у контейнера</p> 
          </div> 
        </div> 
      </li> 
      <li class="menu__item"><a class="menu__link" href="#">item</a></li> 
      <li class="menu__item"><a class="menu__link" href="#">item</a></li> 
    </ul> 
  </div> 
</nav>