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

[Anonymous]

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











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.








/*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;
}


Подробнее здесь: https://stackoverflow.com/questions/797 ... rizontally