Div перемещается при изменении размера

[Piphouse]

Все мои элементы div перемещаются, когда я изменяю размер окна. У меня есть ссылка на мое рабочее место в домике на дереве, чтобы вы могли понять, о чем я говорю. Просто нажмите «Предварительный просмотр рабочей области» в правом верхнем углу. Я также опубликую свой код ниже. https://w.trhou.se/054p1vz3tv




<голова>
<мета-кодировка="utf-8">











<тело>



Майкл

Кристина

.wrapper {
ширина: 497 пикселей;
высота: 100 пикселей;
маржа: 0 авто;

дисплей: блок;



}

.Майкл {
цвет: #EEE8AA;
положение: относительное;
преобразование текста: верхний регистр;
размер шрифта: 30 пикселей;

плыть налево;
отображение: встроенный блок;
граница: 1 пиксель белая;





}

.м{
максимальная ширина: 100%;
максимальная высота 100%;

}


.Майкл{


}


.рингхед {
положение: относительное;


плыть налево;
граница: 1 пиксель, сплошной черный;
отображение: встроенный блок;


}

.кольцо{
максимальная ширина: 80%;
максимальная высота: 60%;
}

.Кристина {
цвет: #EEE8AA;
положение: относительное;
плыть налево;
сверло: 1 пиксель, сплошной черный;

преобразование текста: верхний регистр;
размер шрифта: 30 пикселей;
отступ слева: 10%;



}

.c{
максимальная ширина: 80%;
максимальная высота: 60%;

}

тело{
фоновое изображение: url("Изображения/Top Banner.jpg"), url("Изображения/Middle Banner.jpg"), url("Изображения/Bottom Banner.png");
размер фона: 100% 10%, 100% 15%, 100% 100%;
фоновый повтор: без повтора;
фоновое вложение: исправлено;

}
.weddingВеб-сайт{

положение: фиксированное;
верх: 55%;
осталось: 55%;
трансформировать: TranslateX(-55%) TranslateY(-55%);
максимальная ширина: 80%;
максимальная высота: 60%;

}

.свадьба{

максимальная ширина: 80%;
максимальная высота: 60%;
}