When viewing my site in responsive mode on Chrome, my navigation bar extends beyond the `body` when the screen size is below 1300px. See image below:

[![.nav-container extends beyond body.](https://i.stack.imgur.com/9US5O.jpg)](https://i.stack.imgur.com/9US5O.jpg)

I've highlighted the offending element in dev tools and it appears to be my `nav-container` div. Below 1300px, it appears to have a negative right side position value:

[![position property has a negative right side value.](https://i.stack.imgur.com/0fNUN.png)](https://i.stack.imgur.com/0fNUN.png)

```js
body{
    padding:0;
    margin:0;
    box-sizing: border-box;
    position:relative;
    min-height:100vh;
    overflow-x: hidden;
    width:100%;
}

.nav-container{
    position: fixed;
    width:100%;
    z-index:99;
    display: flex;
    justify-content: center;
    transition:0.5s;
}

.logo-container{
    display:flex;
    width:100%;
    justify-content: center;
}

.logo-banner{
    height:75px;
    margin-top: 1em;
    margin-bottom: 1em;
}

nav{
    position:fixed;
    text-align:left;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background:rgb(16, 10, 48);
    transform:translateX(-100%);
    transform-origin:top;
    transition: transform 400ms ease-in-out;
    z-index:10;
}

nav ul {
    margin:0;
    padding:0;
    list-style: none;
    height:100%;
    text-align: center;
    display:flex;
    flex-direction: column;
    justify-content: space-evenly;
}

nav li {
    margin-bottom: 1em;
    margin-left: 1em;
}

//This code for desktop
@media screen and (min-width:1000px){    
    .nav-toggle-button{
        display:none;
    }

    .nav-container{
        position: fixed;
        width:100%;
        z-index:99;
        display: flex;
        justify-content: space-between;
    }

    nav{ 
        display:flex;
        justify-self: flex-end;
        align-items:center;
        margin-right:1em;
        transform:translateX(0%);
        position:static;
        background-color: rgba(0,0,0,0);
    }

    nav li{
        position:relative;
    }

    nav ul {
        display:flex;
        flex-direction: row;
        align-items: center;
    }

    .logo-container{
        margin-left:1em;
        justify-self: flex-start;
        width:200px;
    }
}
```

```html
<body>
        <div class="nav-container">
            <div class="logo-container">
                <a href="./"><img class="logo-banner" src="images/logo-banner.png" alt=""></a>
            </div>

            <button class="nav-toggle-button">
                <span class="hamburger"></span>
            </button>

            <nav>
                <ul class="anim">
                    <li><a href="./" class="nav-link">Home</a></li>
                    <li><a href="buying.html" class="nav-link">Land Acquisition</a></li>
                    <li><a href="selling.html" class="nav-link">Land Disposal</a></li>
                    <li><a href ="projects.html" class="nav-link">Projects</a></li>
                    <li><a href="contact.html" class="nav-link">Contact</a></li>
                </ul>     
            </nav>
        </div>
     <!-- The rest of my HTML here -->
</body>
```

I've already tried adding `overflow-x:hidden;` and setting a `width:100%;` to the body but no luck. Oddly, this issue doesn't exist in Firefox for some reason.

Any insight appreciated, thanks.