Adaptive HTML/CSS header

I make an adaptive header, something seems to come out... But I got stuck on one point: when the screen width decreases, when the edge of the screen reaches the last link, the last link just jumps down:

/* Header */
.header {
    width: 100%;
    position: absolute;
    z-index: 1000;
}

.header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Nav */
.nav {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 880px;
    height: 55px;
    font-size: 1.63vw;

    background-color: black;

    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.nav__link1 {
    float: left;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    position: relative;

    width: 24.18%;

    text-align: center;
    text-decoration: none;

    height: 55px;
    line-height: 50px;
}

.nav__link2 {
    float: left;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    position: relative;

    width: 24.17%;

    text-align: center;
    text-decoration: none;

    height: 55px;
    line-height: 50px;
}


.logo__container {
    float: left;
    display: inline-block;
    margin: 50px 0px 0px -11px;
    box-sizing: border-box;
    vertical-align: top;
    position: relative;

    padding: 0px 20px;
    height: 1px;
    line-height: 50px;

    z-index: 1001;
}

.logo {
  position: absolute;
  top: -50px;
  left: -5px;
  height: 75px;
}

.logo img {
  height: 75px;
}

.nav__link3 {
    float: left;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    position: relative;

    width: 24.17%;

    text-align: center;
    text-decoration: none;

    height: 55px;
    line-height: 50px;
}

.nav__link4 {
    float: left;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    position: relative;

    width: 24.18%;

    text-align: center;
    text-decoration: none;

    height: 55px;
    line-height: 50px;
}

<header class="header">
        <div class="container">
            <div class="header__inner">
                <nav class="nav">
                    <a class="nav__link1" href="#">Ппппппп</a>
                    <a class="nav__link2" href="#">ООО</a>
                    
                    <div class="logo__container">
                        <div class="logo">
                            <img src="../logo.png" />
                        </div>
                    </div>
              
                    <a class="nav__link3" href="#">Ккккк</a>
                    <a class="nav__link4" href="#">Ррррррр</a>
                </nav>
            </div>
        </div>
    </header>

The nav block itself is perfectly reduced, at first it remains unchanged, and when the edge of the screen reaches it, it seems to "rest" on it, and moves along with it. It is necessary that the links also "rest" on the edge of the screen and move, shrinking, along with it.

And is it possible to reduce not only the width, but also the height? If so, how to implement it?

And I would also like to know if you can somehow distribute the links in the block evenly, and not select every hundredth of a percent? It seems as if I messed up something, and the links can safely run behind the nav block, and this prevents it. But I can't find the error...