Brave shows margin on div even with margin set to 0, where as firefox works as intended

Question

There is margin on the right on div element even though I set the margin: 0, It works as expected in Firefox. What is wrong with chrome?

Codepen Link

<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-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;
}

There is no margin on div.box in Firefox

There is margin on the right in div.box in Chrome

The margin is set to zero but chrome has margin on the right where as Firefox doesn't

I set the margin to 0, which works in firefox but not on brave