Javascript 如何调整只有一个子元素的祖父母样式，然后重置为正常？

我希望

#homeContainer

具有页面的全部宽度。祖辈元素控制宽度和边距

下面是DOM。当我取消选中

margin:0 auto

时，将获得全宽。我如何控制

.p-body-internal

代码，仅用于与

#homeContainer

关联的代码

我试着添加这行JS。它去掉了

.p-body-internal

的边距，但它不仅仅适用于`#homeContainer。它会对整个页面执行此操作，我只希望该部分恢复正常

对于任何想看到这一点的人，实际的网站是：

document.querySelector（'#homeContainer'）。最近（'.p-body-inner'）。style.margin='0'
.p-body
{
显示器：flex；
对齐项目：拉伸；
柔性生长：1；
最小高度：1px；
背景：灰色；
}
.p-主体-内部
{
显示器：flex；
弯曲方向：立柱；
宽度：100%；
最大宽度：1200px；
填充：0 10px；
保证金：0自动；
左侧填充：10px；
右边填充：10px；
填充顶部：10px；
垫底：20px；
}
p-body-main
{
显示：表格；
表布局：固定；
宽度：100%；
页边距底部：自动；
最小高度：1px；//IE11解决方案-与#139187相关
}
#家庭集装箱{
宽度：100vw；
高度：100px；
背景：红色；
边框：5px纯绿色；
}
#重置{
宽度：300px；
边框：5px纯蓝色；
}

需要.p-body的全宽
这应该居中并再次继承边距：0自动。
我认为您在错误的元素中添加了
边距：0 auto

并带有
显示：flex子项将自动填充宽度，您无需指定
宽度：100%


.p-body
{
显示器：flex；
对齐项目：拉伸；
柔性生长：1；
最小高度：1px；
背景：灰色；
}
.p-主体-内部
{
显示器：flex；
弯曲方向：立柱；
宽度：100%；
最大宽度：1200px；
填充：0 10px；
保证金：0自动；
左侧填充：10px；
右边填充：10px；
填充顶部：10px；
垫底：20px；
}
p-body-main
{
显示：表格；
表布局：固定；
宽度：100%；
页边距底部：自动；
最小高度：1px；//IE11解决方案-与#139187相关
}
#家庭集装箱{
高度：100px；
背景：红色；
边框：5px纯绿色；
}
#重置{
宽度：300px；
边框：5px纯蓝色；
保证金：0自动；
}

需要.p-body的全宽
这应该居中并再次继承边距：0自动。
add to p.body{…justify content:space around；}或justify content:'center'，因为您有display flex，但默认为“justify content:flex start”（从左开始）@Robert它不起作用。谢谢，谢谢你的提交。对于这个特定的例子，我想让
.p-body-inner
和
.p-body-main
保持原样。“超出标准”的元素是
#homeContainer
。页面的其余部分是模板化的，应该具有原始样式。我真的只是想知道如何才能使
#homeContainter
成为全宽，并具有0边距。然后不影响代码的其余部分。它现在是0边距，
.p-body-inner
和
.p-body-main
未被触及。它不接触外部边缘的原因是
.p-body-inner
有填充物。就像房子里的墙一样，你无法通过忽略墙的厚度来神奇地增加房间的体积。我的问题是，我无法将
边距：0 auto
放置到
#homeContainer
之后的所有其他元素。这是一个CMS类型的页面，将生成动态内容。我正在尝试调整
#homeContainer
的代码，使其与现有元素一起工作。它需要
宽度：100vw
或%，因为
最大宽度：1200
代码。如果你想看的话，这是实时页面