Navbar width greater than screen size even though width: 100%

I am building a website mobile-first and I am lost at why the width of the navbar is going outside of the screen width. I am viewing it on a 414 x 896 screen. I set width: 100%, margin and padding to 0, yet it still overflows. I also tried a div element and the same thing happens. I am using Google DevTools to view the screen, maybe it's an error on their side?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

html {
  font-size: 16px;
}

* {
  font-family: Verdana;
  padding: 0;
  margin: 0;
}

nav {
  height: 50px;
  border: 1px solid red;
  width: 100%;
}

<!-- language: lang-html -->

<nav>
  <a>Log in</a>
</nav>

<!-- end snippet -->

I tried individually assigning padding and margin to the navbar and messing around with the height property

The width of the nav is being calculated by adding the 100% plus the 1px borders. Either use calc() to account for that, or change the box-sizing:

Using calc():
<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

html {
  font-size: 16px;
}

* {
  font-family: Verdana;
  padding: 0;
  margin: 0;
}

nav {
  height: 50px;
  border: 1px solid red;
  width: calc(100% - 2px);
}

<!-- language: lang-html -->

<nav>
  <a>Log in</a>
</nav>

<!-- end snippet -->

Using box-sizing:
<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

html {
  font-size: 16px;
}

* {
  font-family: Verdana;
  padding: 0;
  margin: 0;
}

nav {
  height: 50px;
  border: 1px solid red;
  width: 100%;
  box-sizing: border-box;
}

<!-- language: lang-html -->

<nav>
  <a>Log in</a>
</nav>

<!-- end snippet -->

You're setting the nav to 100%, and then adding a border of 1px to it which makes the total larger.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    html {
      font-size: 16px;
      width:100%;
    }

    * {
      font-family: Verdana;
      padding: 0;
      margin: 0;
    }

    nav {
      height: 50px;
      border: 1px solid red;
    }

<!-- language: lang-html -->

    <nav>
      <a>Log in</a>
    </nav>

<!-- end snippet -->