Как я могу предотвратить переполнение оверлеем тела сайта? ⇐ Html

[Anonymous]

Я пытаюсь добавить изображения зубов на свой сайт для встраивания. Несмотря на размер изображения, основная часть сайта продолжает переполняться вправо. Я уже пытался скрыть любой overflow-x в теле, но по какой-то причине он отсекает противоположную половину моего сайта.
Я также пытался создать контейнер для своего ресурса, но это абсолютно ничего не дало.
Как я могу остановить это поведение?
Вот изображение того, о чем я говорю:

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

.teeth1 {
overflow-x: hidden;
max-width: 727px;
max-height: 240;
}

.container {
display: grid;
grid-template-areas:
"header header header"
"nav content aside"
"footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
grid-gap: 10px;
margin: 0 auto;
transition: 0.5s all ease;
line-height: 1.2em;
}

.header {
grid-area: header;
flex-direction: row;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
align-items: center;
background-image: url("https://media1.tenor.com/m/XDhXK2p6qvEAAAAd/claire-claire-francois.gif");
white-space: normal;
overflow: hidden;
background-repeat: no-repeat;
background-size: cover;
width: 800px;
height: 237px;
margin: 0 20%;
padding: 1px;
border: white 10px double;
background-position-y: -90px;
border-image: url(IMG_0868.png) 4.6 fill round;
background-clip: padding-box;
}

.aside {
grid-area: aside;
display: flex;
justify-content: space-between;
align-items: center;
margin: auto;
display: flex;
justify-content: center;
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
background-color: rgb(51, 51, 51);
max-width: 200px;
height: 650px;
min-width: 155px;
padding: 8px;
border-radius: 1px;
overflow-y: scroll;
overflow-x: nowrap;
white-space: normal;
word-break: break-word;
border: double 10px white;
border-radius: 5px;
}

.main {
grid-area: content;
display: flex;
justify-content: center;
flex-direction: ;
flex-wrap: nowrap;
align-items: center;
background-color: transparent;
max-width: 1050px;
max-height: 700px;
min-width: 900px;
min-height: 700px;
padding: 7px;
border-radius: 1px;
overflow-x: nowrap;
white-space: normal;
word-break: break-word;
border-width: 10px;
border-style: solid;
border-image: url("IMG_0868.png") 4.6 fill round;
}

.footer {
grid-area: footer;
display: flex;
justify-content: space-between;
align-items: center;
align-items: center;
background-color: darkred;
border-width: 4px;
border-style: inset;
}

.nav,
.aside {
margin: 0;
}

.nav,
.aside {
margin: 0;
}

.flex-item {
margin: auto;
}

.nav {
grid-area: nav;
display: flex;
justify-content: space-between;
align-items: center;
margin: auto;
display: flex;
justify-content: center;
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
background-color: rgb(51, 51, 51);
max-width: 200px;
height: 650px;
min-width: 155px;
padding: 8px;
border-radius: 1px;
overflow-y: scroll;
overflow-x: nowrap;
white-space: normal;
word-break: break-word;
border: double 10px white;
border-radius: 5px;
}

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

[img]teeth.png[/img]



ndfsj




to do:
insert all the stamps type shit
add the yumeship page

add the oc page
add lace
add teeth overlay


blank

yada

Подробнее здесь: https://stackoverflow.com/questions/798 ... -site-body