Нужно, чтобы блок с зеленой обводкой был по всей ширине страницы (нужно чтобы именно цвет фона был по всей ширине), а сам контент был в соответствии с шириной контейнера). Сложность в том, что должна сохраниться вложенность данного блока, т.к в дальнейшем будет адаптивность
.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;
background: #95afc0;
border: 3px dashed green;
}
.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>