My goal is for #homeContainer to occupy the entire width of the page, but a higher-level element is restricting its width and margin.
Below you can see the DOM structure. By removing margin: 0 auto, I am able to achieve full width. How can I specifically target the code within .p-body-inner that is associated with #homeContainer?
I attempted to use this line of JavaScript. It does remove the margin for .p-body-inner, but it affects the whole page rather than just the section pertaining to `#homeContainer`. My intention is to modify only that section and then revert back to the original styling.
If you wish to view this issue in action, visit the actual site at:
https://i.sstatic.net/J0UUB.png
document.querySelector('#homeContainer').closest('.p-body-inner').style.margin = '0';.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: 100px;
background: red;
border: 5px solid green;
}
#reset {
width: 300px;
border: 5px solid blue;
}<div class="p-body">
<div class="p-body-inner">
<div class="p-body-main">
<section id="homeContainer">
Need full width of .p-body
</section>
<section id="reset">
This should be centered and inherit the margin: 0 auto again.
</section>
</div>
</div>
</div>