How to make 2 navs overlap using css - css

Question

I have 2 navs inline, and one of them is floating on the right side:
2 navs
I would like to center the text in the first nav but to the center of the screen instead of the nav itself. I thought that the easiest way to solve this would be to make the 2 navs overlap but I'm not sure. I was wondering if anyone could help me solve this problem?
header {
font-size: 10px;
letter-spacing: 1.025px;
background-color: black;
padding: 1em;
}
header>nav:nth-child(1) {
float: right;
background-color: red;
padding: 1em 1em 1em 1em;
}
header nav {
color: white;
text-align: left;
}
header nav ul {
list-style: none;
display: inline-block;
position: relative;
padding: 0;
}
header nav ul li {
display: inline;
padding-left: 1em;
padding-right: 1em;
}
<header>
<nav>
MAGYAR |
ENGLISH
</nav>
<nav>
<ul>
<li>RÓLAM</li>
<li>ZENE</li>
<li>GRAFIKA</li>
<li>JÁTÉKFEJLESZTÉS</li>
</ul>
</nav>
</header>

Answer 1

You want the nav items to be centered in the bar, ignoring the width of the nav element to the right?
One way would be to use absolute positioning on the red nav to remove it from the flow of the page. By removing it from the flow, it's width/height will be ignored so you can center the rest of the items in the nav based on the whole screen.
Add some positioning to the red nav and make sure you set the header to be position: relative. Finally, change the text-align to center.
Be aware: By removing the red nav from the flow, it's possible that the other nav items may overlap the red nav depending on the screen size. Make necessary adjustments with media queries or some other solution.
header {
font-size: 10px;
letter-spacing: 1.025px;
background-color: black;
padding: 1em;
position: relative;
}
header>nav:nth-child(1) {
position: absolute;
top: 1em;
right: 1em;
bottom: 1em;
background-color: red;
padding: 1em 1em 1em 1em;
}
header nav {
color: white;
text-align: center;
}
header nav ul {
list-style: none;
display: inline-block;
position: relative;
padding: 0;
}
header nav ul li {
display: inline;
padding-left: 1em;
padding-right: 1em;
}
<header>
<nav>
MAGYAR |
ENGLISH
</nav>
<nav>
<ul>
<li>RÓLAM</li>
<li>ZENE</li>
<li>GRAFIKA</li>
<li>JÁTÉKFEJLESZTÉS</li>
</ul>
</nav>
</header>