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

[Anonymous]

Я пытаюсь добавить эти крутые ресурсы с зубами, которые я сделал, на свой сайт для встраивания, просто чтобы он выглядел круто. По какой-то причине, несмотря на размер изображения, основная часть сайта продолжает переполняться вправо. Я уже пытался скрыть любой overflow-x в теле, но по какой-то причине это отрезало противоположную половину моего сайта. Я также пытался создать контейнер для своего актива, но это абсолютно ничего не дало. Мне просто нужны крутые ресурсы, как мне это остановить? (не обращайте внимания на то, насколько уродливо он выглядит, я уже 4 дня работаю над сайтом)
как он выглядит

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

.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