css3 - CSS keep menu in container and expand background to full screen -

the picture below shows get.

it menu within container, menu may wrap multiple lines when window/screen gets narrow menu items fit in. @ same time menu have background expands full screen in width, while expanding in height menu when gets wrapped multiple lines. think not possible css, css amateur. current solution involves @media queries set height of menu background resolutions wrapping appears. not take account font-size change, making each line of menu higher.

here jsfiddle basic setup, not want: https://jsfiddle.net/n3jmyq2f/3/ (edited, not final version)

here code:

<div class="container">   <div class="menu_wrap">         <div class="menu_bg"></div>         <div class="menu">             <ul>                 <li><a href="#">item 1</a></li>                 <li><a href="#">item2</a></li>                 <li><a href="#">item3</a></li>                 <li><a href="#">item4</a></li>                 <li><a href="#">item5</a></li>                 <li><a href="#">item6</a></li>             </ul>         </div> </div> <div class="content">it's me, mario!</div> 

css:

.container {     width:50%;     margin: 0 auto;     background:lightgreen;     height:300px; } .menu_bg{     position: absolute;     background: #afafaf;     width: 100%;     left:0;     height:30px;     z-index: -1; } ul {     height:30px;     background: #afafaf; }  li {     display:inline-block; } 

the first option simplest.

stop thinking of .container must contain everything. it's class can reused , when required.

if take menu div out of "container" put .container div inside effect looking for.

jsfiddle demo

*,  body {    padding: 0;    margin: 0;  }  .container {    width: 50%;    margin: 0 auto;    background: lightgreen;  }  .menu {    background: #afafaf;  }  ul {    border: 1px solid green;  }  li {    display: inline-block;  }  .content {    height: 300px;  }

<div class="menu">    <div class="container">      <ul>        <li><a href="#">item 1</a>        </li>        <li><a href="#">item2</a>        </li>        <li><a href="#">item3</a>        </li>        <li><a href="#">item4</a>        </li>        <li><a href="#">item5</a>        </li>        <li><a href="#">item6</a>        </li>      </ul>    </div>  </div>  <div class="container">    <div class="content">it's me, mario!</div>  </div>

2nd option

use pseudo-element

*,  body {    margin: 0;    padding: 0;  }  .container {    width: 50%;    margin: 0 auto;    background: lightgreen;    height: 300px;  }  ul {    background: #afafaf;    position: relative;    border: 1px solid green;  }  ul:before {    content: '';    position: absolute;    height: 100%;    background: inherit;    width: 100vw;    left: 50%;    transform: translatex(-50%);    z-index: -1  }  li {    display: inline-block;  }

<div class="container">    <div class="menu">      <ul>        <li><a href="#">item 1</a>        </li>        <li><a href="#">item2</a>        </li>        <li><a href="#">item3</a>        </li>        <li><a href="#">item4</a>        </li>        <li><a href="#">item5</a>        </li>        <li><a href="#">item6</a>        </li>      </ul>    </div>    <div class="content">it's me, mario!</div>  </div>

jsfiddle demo