I have a grid of identical boxes, but some of them seem to appear with dotted lines, corresponding to the padding of the box. It appears to be the same boxes in the grid each time, and each box has the same CSS. If I go into the inspector and uncheck the padding feature, the dotted box grows to fill its container. If I close the browser and then reopen it, it sometimes disappears. Why is this happening?

Each of the grid boxes is a element with class .box and a .box-inner inside it. I'm using Google Chrome (Version 146.0.7680.165)

The relevant CSS classes are

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.box {
    padding: 5% 10%;
    display: flex;
}

.box-inner {
    margin: auto;
}