css – 1 pixel spacing between navbar flex container border and flex merchandise border

There’s a bizarre 1 pixel border between the flex container border and the borders round my flex objects. I’ve put in my very own margin: 0 padding: 0 and box-sizing border field on *. I’ve additionally tried it with a full css reset with no change. I am assuming it is a browser subject, however how do I repair it?

HTML

<physique>
<nav class="grid-container">
    <div class="brand grid-item">
        <a href="#">brand</a>
    </div>
    <div class="about grid-item">
        <a href="#">about</a>
    </div>
    <div class="house grid-item">
        <a href="#">house</a>
    </div>
    <div class="contact grid-item">
        <a href="#">contact</a>
    </div>
    <div class="search grid-item">
        <a href="#">search</a>
    </div>
</nav>

</physique>

CSS

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.grid-container {
show: flex;
border: 2px strong pink;
justify-content: finish;
hole: 1rem;
margin: 0;
padding: 0;
}

div {
margin-top: 0;
margin: 0;
padding: 0;
show: block;
}

.brand {
margin-right: auto;
}

.grid-item {
border: 2px strong pink;
}

a {
text-decoration: none;
}