设置margin:0后Brave/Chrome中div仍有右侧边距，Firefox表现正常

尽管我已设置margin:0，但div元素右侧仍存在边距，该设置在Firefox中表现符合预期。Chrome出现了什么问题？

HTML代码 #

<section>
    <h2>CSS Positing Property</h2>
    <div className="css-box illustration">
        <div className="box">
        <div className="box2"><p>box 2</p></div>
        <div className="box1"><p>box 1</p></div>            
    </div>
</section>

CSS代码 #

css-box {
    margin: 0;
}

.css-box .box {
    width: 500px;
    height: 500px;
    border: 2px solid white;
    position: relative;
    margin: 0;
}
.box div {
    width: 160px;
    height: 160px;
    margin: 0;
    padding: 0;
}

.box2 {
    background-color: red;
}

.box1 {
    background-color: blue;
}

浏览器表现对比 #

• Firefox中div.box无右侧边距：
  

• Chrome中div.box存在右侧边距：
  

• 边距差异对比：
  

我设置了margin:0，该设置在Firefox中生效，但在Brave中也无效

内容的提问来源于stack exchange，提问作者space-goblin