HTML - Make Child Ignore Parent Div Padding

Question

I have a div div inside a div container, and the title has a different background color than the div container.

<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 is that the container div has indents on the right and left, but I want the title to ignore this addition, so the background color will be displayed over the entire width and will not be indented.

Here's the jsfiddle of my code: http://jsfiddle.net/6e46fzge/

Answer 1

If you add a negative left / right field to the .site-header , and then add the same value to the left / right input field, you will get the effect you 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> 

Answer 2

You can simply use a negative stock of the same amount as the fill,

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

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