Problem mit Bild-Positionierung

[Paludis]

Ich habe versucht, eure Lösungen umzusetzen, habe aber wohl etwas falsch gemacht, denn es wird nur korrekt angezeigt, wenn ich mit der Maus über den Buttons bin. Gehe ich mit der Maus weg, rutscht der Text des Buttons wieder links runter. Ausserdem ist am Beispiel von "Home" zu sehen, dass es wieder nicht schön mittig im Balken sitzt.

*, *::before, *::after { box-sizing: border-box; }




body {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0.3)), url('img/tape-measure.jpg');
    background-size: cover;
    min-height: 1000px;
    color: #000305;
    font-size: 100%;
    font-family: 'Coming Soon', 'Lucida Sans Unicode', cursive;
    line-height: 1.5;
}

a {
    text-decoration: none;
}

a:link, a:visited {
    color: #CF5C3F;
}

a:hover, a:active {
    background-color: #CF5C3F;
    color: #fff;
}

.mainHeader {
    width: 90%;
    margin: 0 auto;
}


.mainHeader img.Logo {
    position: absolute;
    right: 5%;
    top: 57%;
    width: 15%;
    height: auto;
}

.mainHeader img.Margrit {
    position: absolute;
    right: 5%;
    top: 15%;
    width: 15%;
    height: auto;
}


.mainHeader nav {
    background-color: #9cb34f;
    height: 40px;
    border-radius: 5px;
}

.mainHeader nav ul {
    list-style: none;
    margin: 2em;
    padding: 0;
    
}


nav:first-of-type ul {
    display: flex;
    flex-flow: row wrap;
}


nav:first-of-type li {
    flex: 1 0 15em;
    padding: 0.125em;
}


nav a {
    display: block;
    padding: 1em;
    text-decoration: inherit;
}


.mainHeader nav a:link, .mainHeader nav a:visited {
    color: #fff;
    
    
}

.mainHeader nav a:hover,
.mainHeader nav a.Home:link,
.mainHeader nav a.Home:visited {
  background-color: #CF5C3F;
  text-shadow: none;
  padding: 8px 125px;
}


.mainHeader nav ul li a {
    border-radius: 5px;
    
    
}


.mainHeader p.inBearbeitung {
    position: absolute;
    top: 40%;
    left: 5%;
    font-size: 175%;
}



.mainFooter {
    position: absolute;
    bottom: 3%;
    width: 90%;
    left: 5%;
    right: 5%;
    height: 20px;
    border-radius: 5px;
    background-color: #9cb34f;
	display: table;
    
}


.mainFooter p {
    
    color: #fff;
    display: table-cell;
    vertical-align: middle;
    padding-left: 1%;
}