How to override parent containers width property in CSS [duplicate] - html

Question

This question already has answers here:
Is there a way to make a child DIV's width wider than the parent DIV using CSS?
(15 answers)
Closed 7 years ago.
I am having trouble overriding the parent's width within my CSS.
Essentially, I have a parent and a child div like:
.parent{ width: 768px; background-color: red; }
.child{ background-color:blue; }
<div class="parent">
<div class="child">
//content
</div>
</div>
A lot of elements still use the parents parameter of 768px width, however I wish this one specific child element to extend the entire width of the screen - I have tried doing left: 0, right: 0, clearing the floats and setting the width to auto.
I also wanted to avoid using !important if I can.
Any suggestions ?
An accurate representation of what I want would look like this:
_____
|par. |
_|_____|_
| child |
| |
|_________|
| |
|_____|

Answer 1

Do this, use padding and margin (margin-left and margin-right and padding-left and padding-right) to achieve this.
<div class="parent">
<p>This is parent</p>
<div class="child">
<p>This is child</p>
</div>
<p>This is still parent</p>
</div>
.parent{ width: 468px; background-color: red; margin: 0 auto; }
.child{
background: blue;
margin-left: -300vw;
padding-left: 300vw;
margin-right: -300vw;
padding-right: 300vw;
}
http://cssdeck.com/labs/full/6xljy6pz

Answer 2

Try this https://jsfiddle.net/7txe5eev/. This will calculate and set margin for you. I assumed you are using bootstrap but if you get the logic you can modify this to fit your code.
HTML
<div class="container">
<div class="row">
<div class="col-xs-offset-3 col-xs-6 parent">
<div class="row">
<div class="col-xs-12 divs red"></div>
</div>
<div class="row">
<div class="col-xs-12 divs green special"></div>
</div>
<div class="row">
<div class="col-xs-12 divs blue"></div>
</div>
</div>
</div>
CSS
.divs {
height: 200px;
margin: 5px auto;
}
.red {
background-color: red;
}
.green {
background-color: green
}
.blue {
background-color: blue;
}
.special {
width: 100vw;
}
JS
$(document).ready(calcMargin);
$(window).resize(calcMargin);
function calcMargin() {
var width = $('.parent').width() - $('.special').width();
var leftMargin = width/2;
$('.special').css('margin-left', leftMargin);
}

Answer 3

Kind of hacky, but it works (in browsers that support calc and vw): http://jsfiddle.net/tvg2ocvs/
margin-left: calc(-50vw + (768px/2));
margin-right: calc(-50vw + (768px/2));
Doesn't look nice when viewport is smaller than 768px though, but nothing a media query won't fix :)