 <p>Not completely sure if I understand what you are trying to do, but I gave it a shot.</p> <p>In the CSS if you change the margin to padding, then any background color on the child element will extend to the parent. background color is includes the padding but not the margin.</p> <p>I also had to bump up the width of the child 20px for it to fill properly.</p> <p>Updated fiddle: <a href="https://jsfiddle.net/5qp1a3um/1/" rel="nofollow">https://jsfiddle.net/5qp1a3um/1/</a></p> <pre><code>.inner{ padding-left: 100px; padding-right: 100px; background-color: blue; width: 220px; height: 300px; border: 1px solid green; } </code></pre>