text in navbar displaced on other sections of page - html

Question

In certain sections of my site, the text within the navbar is a few pixels off compared to the other sections. (possible clue: section 'Austausch' and 'Mitmachen' are the two who do have the same positioning.)
I've not yet been able to figure it out, but I would guess that it has something to do with me manually setting the 'top' position trough inline-css. To not clutter this page too much, you can just view the source code by inspecting the webpage here.
Here's my style.css:
#-webkit-keyframes blink {
/*
0% {
opacity: 1;
}
49% {
opacity: 1;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
*/
}
.blink {
/*
-webkit-animation: blink 2s;
-webkit-animation-iteration-count: infinite;
-moz-animation: blink 1s;
-moz-animation-iteration-count: infinite;
-o-animation: blink 1s;
-o-animation-iteration-count: infinite;
*/
}
html {
background-color: #e7d8cf;
background-image: url("placeholder.png");
background-repeat: repeat;
background-size: 150px;
}
html,body{
overflow-x: hidden;
}
body {
margin: 0 auto;
width: 100%;
height: 100%;
}
.container {
display: block;
width: 30%;
height: 800px;
margin: 50px;
text-align: center;
border: none;
background-color: none;
}
#media only screen and (max-width: 768px) {
.container {
width: 320px;
height: 500px;
}
}
.header {
position: relative;
top:100px;
width: 200px;
height: auto;
margin-left: auto;
margin-right: auto;
padding: 0;
}
#media only screen and (max-width: 768px) {
.header {
width: 20%;
height: 20%;
}
}
.navbar {
align-content: center;
width: 500px;
height: 20px;
margin: 5px;
padding: 10px;
border: 1px solid black;
box-shadow: 0 1px 0 red;
background: #faf8f7;
}
#media only screen and (max-width: 768px) {
.header {
width: 20%;
height: 20%;
}
}
.box {
position: relative;
top: 50px;
left: 50%;
display: block;
float: left;
width: 740px;
height: 420px;
margin: 5px;
padding: 10px;
overflow-y: auto;
overflow-x: hidden;
border: 1px solid black;
background: #faf8f7;
/*
box-shadow: -3px 3px 0px #000000; */
}
#media only screen and (max-width: 768px) {
.box {
width: 300px;
height: 500px;
left: 20px !important;
}
}
#media only screen and (max-width: 400px) {
.box {
left: -50px !important;
}
}
.track {
height:100px;
background-color:none;
top:-30px;
box-shadow:none;
border:none;
position: relative;
display: block;
float: left;
width: auto;
height: auto;
overflow-y: auto;
overflow-x: hidden;
background: #faf8f7;
}
#media only screen and (max-width: 768px) {
.track {
}
}
.nav {
margin-top:20px !important;
/* position: fixed; */
top: -960px;
/* display: block; */
float: left;
left: 50%;
width: 400px;
height: 20px;
margin: 5px;
padding: 10px;
/* overflow-y: auto;
overflow-x: hidden; */
border: 1px solid black;
background: #faf8f7;
box-shadow: -3px 3px 0px #000000;
}
#media only screen and (max-width: 768px) {
.nav {
width: 300px;
top: -1100px;
left: 21px;
height: 30px !important;
}
}
#media only screen and (max-width: 400px) {
.nav {
left: -50px !important;
}
}
.minibox {
position: relative;
left: 20px;
top: -280px;
display: block;
float: left;
width: 260px;
height: 40px;
margin-top: 5px;
padding-top: 10px;
overflow-y: auto;
overflow-x: hidden;
border: 1px solid black;
background: #dbdbdb;
box-shadow: -3px 3px 0px #000000;
display: none;
}
#media only screen and (max-width: 768px) {
.minibox {
width: 20%;
height: 20%;
display: none
}
}
.subbox {
position: relative;
left: -11px;
width: 761px;
height: 330px;
margin-top: -5px;
padding: 0px;
overflow-y: auto;
overflow-x: hidden;
border: 1px solid black;
background: #faf8f7;
}
#media only screen and (max-width: 768px) {
.subbox {
width: 319px;
height: 330px;
}
}
.blinktext {
left: calc(50% - 70px);
position: relative;
top:50px;
width: 200px;
height: auto;
margin-left: auto;
margin-right: auto;
padding: 0;
margin:0;
color:white;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,-2px 2px 0 #000;
display: none;
}
#media only screen and (max-width: 768px) {
.blinktext {
display: none
}
}
p, h2, a {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
}
#media only screen and (max-width: 768px) {
.minibox {
font-size: 10px;
width: 20%;
height: 20%;
}
}
a {
/* font-family: "Lucida Console", "Courier New", monospace; */
text-decoration: none;
font-weight: normal;
color: black;
}
img {
border: 1px solid black;
outline-offset: -1px;
}
#media only screen and (max-width: 768px) {
.img {
width: 20px;
}
}

Answer 1

Your top position has no effect here since it's static.
See here some documentation about it :
MDN Web docs - top
The HTML code is different from one page to another, nav element in one of the page is nested into a <small></small> HTML element, in other page it is not. So you have to make uniform you code to expect a similar behaviour.