Flex containter shifted to the right off screen

Hello,

I’m trying to complete the off-platform tea cozy project and when I’m adding the nav bar its shifted to the right a little which results in the left side of the box looking like it has margin or padding (but it doesnt i even manually entered 0 for margin and padding to make sure), and the right side off the box is off the screen. please review the screenshot and code below to see what im taking about.

<!DOCTYPE html>
<html>
    <head>
        <title>The Tea Cozy</title>
        <link rel="stylesheet" href="./resources/index.css">
    </head>

    <body>
        <nav class="navbar">
            <div class="nav-left"><a href="*" class="nav-left"><img src="resources/images/img-tea-cozy-logo.png"></a></div>
            <div class="nav-right"><a href="*" class="nav-right">Mission</a></div>
            <div class="nav-right"><a href="*" class="nav-right">Featured Tea</a></div>
            <div class="nav-right"><a href="*" class="nav-right">Locations</a></div>
            
        </nav>


    </body>
</html>

-------------------------------------------------------------------------------------------------------

* {
    font-family: helvetica;
    font-size: 22px;
    color: seashell;
    background-color: black;
    opacity: 0.9;
    border: 1px solid red;
}

.navbar {
    display: flex;
    flex-direction: row;
    align-items: center; /* aligns links vertically */
    position: fixed;
    width: 100%; 
}

.nav-left {
    flex-grow: 1; /* seperated the right and left nav items */
}

.nav-right {

}

Looks like the default browser margin/padding, indeed. Did you try adding margin: 0; and padding: 0 to your general selector (*), already?