Problem mit Bild-Positionierung

[Paludis]

Vielen Dank, Eure Antworten sind mir aber ehrlich gesagt etwas zu kompliziert. Ich bin noch kompletter Anfänger.

Jedenfalls habe ich es so gelöst:

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

.mainHeader nav ul {
    list-style: none;
    
}

.mainHeader nav ul li {
  text-align: center;
  display: inline-block;
  width: 23%;
  position: relative;
  top: 8px;
}


.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;
    
    
}

Korrigiert bitte alles, was falsch ist, wenn Ihr die Zeit dazu habt.

Ausserdem habe ich ein anderes Problem. Und zwar habe ich eine Media Query für das iPhone 6+ hinzugefügt. Allerdings sieht das dann so aus:

Code:

@media screen
    and (device-width: 414px)
    and (orientation: portrait) {
        body {
            font-size: 85%;
        }


        .mainHeader img.Logo {
            right: 5%;
            top: 42%;
            width: 25%;
        }

        .mainHeader img.Margrit {
            right: 5%;
            top: 35%;
            width: 25%;
        }


        .mainHeader nav {
            height: 120px;
        }

        .mainHeader nav ul li {
          display: block;
          width: 100%;
          top: 10px;
        }

        .mainHeader nav a:hover,
        .mainHeader nav a.Home:link,
        .mainHeader nav a.Home:visited {
          padding: 10px 150px;
        }


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



        .mainFooter {
            left: 5%;
            right: 5%;
            height: 20px;

        }
}