The issue appears when i add a border through the "active" pseudoclass to my links. It seems as if the page is trying to resize itself because of those new pixels created by the border, but i don't know why it's doing it therefore i can't fix it.

```
<body>
    <header class="upper-part">
      <nav class="main-nav">
        <ul>
          <li><a href="#">HOME</a></li>
          <li><a href="#">STORE</a></li>
          <li><a href="#">ABOUT</a></li>
        </ul>
      </nav>
      <h1>THE ROOMS</h1>
    </header>
</body>

```

```
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  background-color: rgb(222, 221, 221);
}
.upper-part {
  background-color: rgba(0, 0, 0, 0.524);
  background-image: url(../images/bground.jpg);
  background-position: center;
  background-size: cover;
  background-blend-mode: darken;
  color: white;
  text-align: center;
  padding-bottom: 8px;
}
.main-nav {
  border-bottom: solid rgba(255, 255, 255, 0.158) 1.5px;
}
.main-nav li {
  display: inline;
  margin: 2px;
}
.main-nav a {
  display: inline-block;
  color: white;
  text-decoration: none;
  font-size: 15px;
  padding: 15px;
}
.main-nav li :hover {
  background-color: rgba(255, 255, 255, 0.142);
}
a:active {
  border: solid white 1px;
}

```