width100%后子元素margin超出怎么解决？

Question

我搜过了，都是说设置box-sizing, 这没border设置了没用。

我现在是把所有的父元素全部margin设置为0来保证width的计算是正确的。有什么好的解决办法？

<style>
.container,.box  {
    width: 100%;
    background-color: black;
}

.box {
    margin-left: 50px;
    background-color: red;
}
</style>
<div class="container">
    <div class="box">我超出了</div>
</div>

Answer 1

// 不给box设置宽度

.container  {
    width: 100%;
    background-color: black;
}

.box {
    margin-left: 50px;
    background-color: red;
}