我很难理解为什么对于我正在try 的内容，CSS会以这种方式工作.
假设我有一个外部和内部的div.内部div的宽度为100%，左边距为150px；在本例中，内部div向右溢出.我的理解是，内部div获得外部div的100%宽度，而空白符-Left将其推送到父div之外.但是，如果我将内部div的左边距更改为右边距，我不会看到它溢出到左边(div outter1和inner1).我判断了dev工具，发现inner1在右边增加了150px的边距，但这似乎没有任何作用.有谁能解释为什么会发生这种情况，以及利润率会发生什么？
.outer {
width:50vw;
height:50vh;
background-color:black;
margin:auto;
}
.inner {
width:100%;
height:50%;
background-color:pink;
margin-left:150px
}
.outer1 {
width:50vw;
height:50vh;
background-color:violet;
margin:auto;
}
.inner1 {
width:100%;
height:50%;
background-color:yellow;
margin-right:150px
}
<div class="outer">
<div class="inner">
<p>Inside parent container(not body), width:100% ; margin-left ; overflow to the right
</div>
</div>
<div class="outer1">
<div class="inner1">
<p>Inside parent container(not body), width:100% ; margin-right ; doesnt overflow to the left
</div>
</div>