CSS Navigation Bar width exceeds a screen view

Question

I have a HTML file and CSS file with code:

body {
    border: 0px;
    padding: 0px;
    margin: 0px;
}


/* HEADER STYLE */
header .top-nav {
    padding: 10px;
    margin: 0;
    position: fixed;
    width: 100%;
    background-color: aqua;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
}

header .top-nav-right-block {
    display: flex;
}

<header>
        <nav class="top-nav">
            <a href="">Home</a>
            <div class="top-nav-right-block">
                <a href="">Portfolio</a>
                <a href="">Contacts</a>
            </div>
        </nav>

    </header>

The problem is when I set a 10px padding of .top-nav I expect to have a 100% width navbar with 10px of padding from each side but what I get instead is just a content pushed out of screen from right side. Inspecting the code in a browser indicates that I have a position-right: -20px.

I understand that paddings applied from left side only and pushes content to the right on respective value, but I don't understand why.

Answer 1

Change the box-sizing on your nav bar to border-box;

See: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

body {
  border: 0px;
  padding: 0px;
  margin: 0px;
}


/* HEADER STYLE */

header .top-nav {
  padding: 10px;
  margin: 0;
  position: fixed;
  width: 100%;
  background-color: aqua;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

header .top-nav-right-block {
  display: flex;
}

<header>
  <nav class="top-nav">
    <a href="">Home</a>
    <div class="top-nav-right-block">
      <a href="">Portfolio</a>
      <a href="">Contacts</a>
    </div>
  </nav>
</header>

Alternately, removing the width and fixed position would resolve the issue, but I'm assuming you want to keep the fixed positioning.