css - HTML - Make Child Element Ignore Parent Div's Padding -

i've got header div inside of container div, , header has different background color container div.

<div class="container">      <!-- header -->     <header class="site-header">         <h1>site title</h1>         <h5>site description</h5>          <nav class="site-nav">             <ul>                 <li>item 1</li>                 <li>item 2</li>                 <li>item 3</li>                 <li>item 4</li>             </ul>         </nav>      </header> 

my problem container div has padding on right , left sides, want header ignore padding, background color show full width , not cut off padding.

here's jsfiddle of code: http://jsfiddle.net/6e46fzge/

if add negative left/right margin .site-header , add same value left/right padding, effect want.

div.container {    max-width: 960px;    margin: 0 auto;    padding-left: 30px;    padding-right: 30px;    background-color: white;  }  .site-header {    margin: 0 -30px;    padding: 0 30px;    border-bottom: 2px dotted #999;    background-color: yellow;  }  .site-nav ul {    list-style: none;    margin: 0;    padding: 0;    padding-bottom: 20px;  }  .site-nav ul li {    padding: 2px;  }

<div class="container">    <!-- header -->    <header class="site-header">      <h1>site title</h1>      <h5>site description</h5>        <nav class="site-nav">        <ul>          <li>item 1</li>          <li>item 2</li>          <li>item 3</li>          <li>item 4</li>        </ul>      </nav>    </header>  </div>