How to adjust grandparent style with only a specific child element? - html

Question

I am wanting #homeContainer to have the full width of the page. A grandparent element is controlling the width and margin.
Below is the DOM. When I uncheck margin: 0 auto the full width is achieved. How can I control the .p-body-inner code for only code associated with #homeContainer?
.p-body
{
display: flex;
align-items: stretch;
flex-grow: 1;
min-height: 1px;
background: gray;
}
.p-body-inner
{
display: flex;
flex-direction: column;
width: 100%;
max-width: 1200px;
padding: 0 10px;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 20px;
}
.p-body-main
{
display: table;
table-layout: fixed;
width: 100%;
margin-bottom: auto;
min-height: 1px; // IE11 workaround - related to #139187
}
#homeContainer {
width: 100vw;
height: 80vh;
background: red;
}
<div class="p-body">
<div class="p-body-inner">
<div class="p-body-main">
<section id="homeContainer">
Need full width of .p-body
</section>
</div>
</div>
</div>

Answer 1

Simply use percentage instead of VW it's because 100% is the entire width of the parent element. However, 100vw is the entire width of the window. Width of the window is more than the width of the element. Hence, the child element overflows out of the parent element.
.p-body
{
display: flex;
align-items: stretch;
flex-grow: 1;
min-height: 1px;
background: gray;
}
.p-body-inner
{
display: flex;
flex-direction: column;
width: 100%;
max-width: 1200px;
padding: 0 10px;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 20px;
}
.p-body-main
{
display: table;
table-layout: fixed;
width: 100%;
margin-bottom: auto;
min-height: 1px; // IE11 workaround - related to #139187
}
#homeContainer {
width: 100%;
height: 80vh;
background: red;
}
<div class="p-body">
<div class="p-body-inner">
<div class="p-body-main">
<section id="homeContainer">
Need full width of .p-body
</section>
</div>
</div>
</div>
If this answer works for you then select this answer as the accepted answer to help others who checkout this question in furture.