Почему div шириной 100% перемещается вверх, когда я сужаю окно браузера, перетаскивая мышь с правой стороны налево? [зак ⇐ Html

[Anonymous]

Контейнер класса div .infosection перемещается вверх, когда я сворачиваю браузер по горизонтали. Я хочу, чтобы он оставался на той же высоте, когда я сворачиваю браузер. Я могу заставить его работать именно таким образом, если удалю max-width:100% из изображений dinerwinepic и dinerplatepic.
Может ли кто-нибудь объяснить, почему это происходит?
Почему div ширины 100% перемещается вверх, когда я сужаю окно браузера, перетаскивая мышь с правой стороны налево?

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

/*MenuColumn*/
.MenuColumn {
display: flex;
max-width: 100%;
}
.dinerwine {
flex: 33.33%;
position: relative;
text-align: center;
}
.dinerplate {
flex: 33.33%;
position: relative;
text-align: center;
}
.dinerdrinks {
flex: 33.33%;
position: relative;
text-align: center;
}
.dinerplatepic {
max-width: 100%;
width:561px;
height: auto;

}
.dinerdrinkspic {
max-width: 100%;
width: 561px;
height: auto;
}
.dinerwinepic {
max-width: 100%;
width: 561px;
height: auto;
}
.infosectie {
max-width: 100%;
width: 816px;
margin-right: 31%;
margin-left: 2%;
color: white;
padding-top: 127px;
padding-bottom: 140px;
}
.infosectie p:first-of-type {
font-weight: 900;
}
.infosectie p:nth-child(3) {
font-size: 24px;
}
.infosectioncontainer {
max-width: 100%;
height: auto;
background: #008C8C;
display: flex;
justify-content: center;
}
.infosectie p:nth-child(5) {
line-height: 16px;
}
.infosectie p:nth-child(10) {
line-height: 16px;
}
.infosectie p:nth-child(12) {
line-height: 16px;
}
.centeredtextcontainer {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(bara.jpeg);
max-width: 100%;
height: auto;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
.centeredtext {
max-width: 100%;
width: 944px;
margin: 0 auto;
text-align: center;
font-size: 20px;
padding-top: 244px;
padding-bottom: 301px;
}

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

[img]dinerwine.jpeg[/img]

[img]dinerplate.jpeg[/img]

[img]dinerdrinks.jpeg[/img]




LOREMIS

DOLOR SIT AMET CONSECTETUR ADIPISCING ELIT NULLAM POSUERE BIBENDUM ALIQUET

Sed vel imperdiet odio In varius, nisl ut vehicula maximus, urna odio molestie sapien, rhoncus pulvinar dui erat quis turpis.

Praesent dolor mi, luctus id lectus eget, maximus blandit ante. Etiam varius imperdiet dui a

cursus Cras condimentum urna purus. Mauris euismod condimentum  urna, sit amet consectetur augue fringilla at.

Maecenas quam tortor, sollicitudin non vehicula vel,pellentesque non enim. Pellentesque sapien diam, viverra quis dictum non,

imperdiet in tortor. Mauris consequat mauris.

Подробнее здесь: https://stackoverflow.com/questions/797 ... wer-by-dra