Разрывы страниц при увеличении ⇐ CSS

[Anonymous]

Мой веб-сайт отображается так, как предполагалось, при масштабе 100 % + при уменьшении. Однако при увеличении масштаба возникает проблема. Первоначально все выглядит нормально, но после перехода к правой части страницы все элементы справа обрезаются, оставляя черный пробел. Хорошо работает только горизонтальная панель навигации.
(Другая проблема заключается в том, что я не могу прокручивать влево, а только вправо (после увеличения). Я предполагаю, что это может быть проблема с содержимым. , меню-вертикальное и оболочка являются элементом флексбокса, поскольку прокрутка начинается там, где начинается вертикальное меню.)
Я не хочу, чтобы элементы вели себя как флексбоксы при увеличении масштаба, я хочу масштабировать, как на этом сайте.
Мой фрагмент кода:

Код: Выделить всё

.menu-horizontal { grid-area: 2 / 1 / 3 / 4;
margin:0 auto;
display: flex;
align-items: center;

min-width: 1450px;
position: relative;
}

.menu-horizontal nav ul {
list-style: none;
font-size:0;
}

.menu-horizontal-bg { grid-area: 2 / 1 / 3 / 4;
background-image: url('assets/horizontal-nav-bg2.png');
background-size: auto;
background-position: center;
margin-bottom: 0;
width: 100%;
max-width: 1850px;
margin: 0 auto;
height: 58px;
z-index: -2;
}

.menu-horizontal li {
display: inline-flex;
}

.menu-horizontal li a {
font-size:16px;
color: #fff;
height:69px;
line-height:69px;
text-align:center;
width:160px;

background-image: url(assets/button.png);
text-decoration: none;
position: relative;
}

.hornav-button-left {
margin-right: -46px;
}

.hornav-button-right {
margin-left: -6px;
}

.header { grid-area: 1 / 1 / 2 / 4;
background-image: url('assets/header6.png');
background-size: auto;
background-position: center;

margin-bottom: 0;
box-sizing: border-box;
width: 100%;
height: auto;
max-width: 1850px;
margin: 0 auto;
}

.background { grid-area: 3 / 1 / 5 / 4;

background-image: url('assets/frbg3.png');
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;
}

.contents {
grid-area: 3 / 1 / 5 / 4;
display: flex;
flex-wrap: nowrap;

margin: 57px auto 0;
margin-bottom: 80px;

}

.menu-vertical {
grid-area : 3 / 1 / 5 / 4;
position : relative;
box-sizing : border-box;
padding-left : 48px;
padding-right : 58px;
padding-bottom : 20px;
max-width : 290px;
border-width : 30px 0;
border-image : url(assets/border.png) stretch;
border-image-outset : 13px 5px 13px 4px;
border-image-slice : 66 16 66 0;
border-style : solid;
background-image : url(assets/contentsbgsmall.png);
background-repeat : repeat;
background-size : contain;
}

.wrapper {
grid-area: 3 / 2 / 5 / 4;
max-width: 980px;
box-sizing: border-box;

padding-left: 59px;
padding-right: 59px;

word-wrap: break-word;
overflow-wrap: break-word;
text-align: justify;

border-width: 42px 0;
border-image: url(assets/border.png) stretch;
border-image-outset: 25px 18px 25px 18px;
border-image-slice: 66 16 66 0;
border-style: solid;

background-image: url(assets/contentsbg.png);
background-repeat: repeat;
background-position: center;
background-size: auto;
}

Вот код.
Изображение заголовка, фоновое изображение и изображение-обертка обрезаны с правой стороны (при масштабировании). Изображение за горизонтальным меню полностью исчезает (.menu-horizontal-bg).
Я попробовал изменить ширину элементов, чтобы она была единообразной, но это не решило мою проблему. Я не уверен, что может быть не так.

Подробнее здесь: https://stackoverflow.com/questions/792 ... zooming-in