Breaking Out of Parent Element with CSS

Often times when developing CSS for a WordPress child theme or just when working with someone elses stylesheets in general, it can be desirable to "breakout" of the parent element and draw a full width element that stretches the entire width of the page.

This can be achieved with the following code:


<div class='parent'>
    <div class='break-out'>
        Breakout Content


    margin:0 auto;
/*The Actual Magic*/
.break-out { margin: 0 calc(50% - 50vw) }

If you're dealing with some particularly stubborn CSS you might need to do something like this:

.break-out { 
    margin: 0 calc(50% - 50vw)!important;