HTML - Rendi l'elemento figlio ignora Padding div genitore

Question

Ho un div di intestazione all'interno di un div contenitore e l'intestazione ha un colore di sfondo diverso rispetto al div contenitore.

<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> 

Il mio problema è che il div contenitore ha imbottitura sui lati destro e sinistro, ma voglio l'intestazione di ignorare questa imbottitura, in modo che il colore di sfondo mostrerà tutta la larghezza e non essere tagliati fuori dall'imbottitura.

Ecco un jsfiddle del mio codice: http://jsfiddle.net/6e46fzge/

Answer 1

Se si aggiunge negativo sinistra/destra margine allo .site-header e quindi aggiungere lo stesso valore alla spaziatura sinistra/destra, si otterrà l'effetto desiderato.

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>

Answer 2

si può semplicemente utilizzare un margine negativo di pari importo, come l'imbottitura,

.site-header{ 
    margin:0 -30px; 
} 

http://jsfiddle.net/6e46fzge/1/