Проблема с навигационной панелью и нижним колонтитулом.

Моя панель навигации и нижний колонтитул неправильно расположены и имеют неправильный размер, и я не знаю, как это решить.

Они оба должны быть центрированы и иметь ширину 90%, но на данный момент ширина панели навигации составляет 100%, а нижний колонтитул на моем iPhone 6s Plus в альбомной ориентации выглядит очень запутанным.

Он находится в правом нижнем углу, и видна только четверть нижнего колонтитула.

Кто-нибудь знает, как это решить? Кстати, я хотел бы показать изображение проблемы, но не могу опубликовать изображение: Я попробовал загрузить ссылку, изображение и файл, но мне не удалось загрузить или опубликовать Код:

 body {


background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('img/tape-measure.jpg');


background-size: cover;


height: 1000px;


color: #000305;


font-size: 87.5%;


font-family: 'Coming Soon', 'Lucida Sans Unicode', cursive;


line-height: 1.5;


margin: 0 auto;


width: 100%;


clear: both;


}


a {


text-decoration: none;


}


a:link, a:visited {


color: #CF5C3F;


}


a:hover, a:active {


background-color: #CF5C3F;


color: #fff;


}


.mainHeader {


width: 100%;


margin: 0% auto;


}


.mainHeader img {


position: relative;


}


.mainHeader img.Logo {


position: absolute;


right: 15%;


top: 74.5%;


max-width: 20%;


height: auto;


}


.mainHeader img.Margrit {


position: absolute;


right: 15%;


top: 15%;


max-width: 20%;


height: auto;


margin-bottom: 100px;


}


.mainHeader nav {


background-color: #9cb34f;


height: 40px;


margin-top: 15px;


border-radius: 5px;


-moz-border-radius: 5px;


-webkit-border-radius: 5px;


}


.mainHeader nav ul {


list-style: none;


margin: 0 auto;


}


.mainHeader nav ul li {


text-align: center;


display: inline;


float: left;


}


.mainHeader nav a:link, .mainHeader nav a:visited {


color: #fff;


display: inline-block;


padding: 10px 25px;


height: 20px;


}


.mainHeader nav a:hover, .mainHeader nav a:active,


.mainHeader nav .active a:link, mainHeader nav .active a:visited {


background-color: #CF5C3F;


text-shadow: none;


}


.mainHeader nav ul li a {


border-radius: 5px;


-moz-border-radius: 5px;


-webkit-border-radius: 5px;


}


.mainHeader p {


position: relative;


}


.mainHeader p.inBearbeitung {


position: absolute;


top: 50%;


left: 5%;


font-size: 140%;


color: #fff;


}


.mainFooter {


position: fixed;


width: 100%;


bottom: 3%;


margin: 0 5%;;


}


.mainFooter .footerBody {


width: 90%;


height: 40px;


clear: both;


text-align: left;


border-radius: 5px;


-moz-border-radius: 5px;


-webkit-border-radius: 5px;


background-color: #9cb34f;


display: table;


}


.mainFooter .footerBody p {


display: table-cell;


vertical-align: middle;


text-align: left;


padding-left: 1%;


margin-top: 0;


}


/* ----------- iPhone 6+ ----------- */


/* Portrait */


@media only screen


and (device-width: 414px)


and (orientation: portrait) {


body {


font-size: 95%;


}


.mainHeader {


width: 90%;


}


.mainHeader img.Margrit {


right: 5%;


width: 25%;


top: 45%;


}


.mainHeader img.Logo { 


right: 5%;


width: 25%;


top: 62%;


}


.mainHeader nav {


height: 160px;


}


.mainHeader nav ul {


padding-left: 0;


}


.mainHeader nav ul li {


width: 100%;


}


.mainHeader nav a:link, .mainHeader nav a:visited {


padding: 11px 120px;


height: 20px;


display: block;


}


.mainHeader p.inBearbeitung {


top: 50%;


left: 5%;


font-size: 135%;


color: #fff;


}


.mainFooter {


height: 20px;


}


.mainFooter .footerBody{


height: 20px;


}


.mainFooter .footerBody p {


padding-left: 1%;


margin-top: 0;


}


}


/* Landscape */


@media only screen


and (device-width: 736px)


and (orientation: landscape) {


body {


font-size: 95%;


}


.mainHeader {


width: 90%;


}


.mainHeader img.Margrit {


right: 5%;


width: 12.5%;


top: 30%;


}


.mainHeader img.Logo { 


right: 5%;


width: 12.5%;


top: 62%;


}


.mainHeader nav {


height: 25px;


}


.mainHeader nav ul {


padding-left: 0;


}


.mainHeader nav ul li {


width: 25%;


}


.mainHeader nav a:link, .mainHeader nav a:visited {


padding: 2.5px 63px;


height: 20px;


display: inline-block;


}


.mainHeader p.inBearbeitung {


top: 45%;


left: 5%;


font-size: 135%;


color: #fff;


}


.mainFooter {


clear: both;


display: table;


text-align: left;


}


.footerBody {


display: table-cell;


vertical-align: middle;


}


.footerBody footerBody.p {


font-size: 90%;


}


}

HTML:

 <!DOCTYPE html> <html lang="de"> <head> <title>Couture Anni</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="resources/css/style.css"> <link href="[URL='https://lumtu.com/yti/bvNNvb25odHRwczovL2ZvbnRzLmdvb2dsZWFwaXMuY29tL2Nzcz9mYW1pbHk9Q29taW5nK1n5W']https://fonts.googleapis.com/css?family=Coming+Soon[/URL]" rel="stylesheet"> <meta name="viewport" content="ширина = ширина устройства, начальный масштаб = 1,0"> </head> <body> <header class="mainHeader"> <img class="Logo" src="resources/img/Content%255Cvariation_800_e.png" alt="Логотип"> <img class="Margrit" src="resources/img/IMG_5347_small.jpg" alt="Аннамария Хофстеттер"> <nav> <ul> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Kontakt</a></li> </ul> </nav> <p class="inBearbeitung"><strong>Diese Seite ist in<br>Bearbeitung.<br> Bis demnächst!</strong></p> </header> <footer class="mainFooter"> <div class="footerBody"> <p>Copyright © <a href="#" title="кутюр-анни">couture-anni.ch</a></p> </div> </footer> </body> </html>

Код (CSS):