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

[Anonymous]

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

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





ndfsj

https://anerdyartists.nekoweb.org/index.html


to do:

insert all the stamps type shit
add the yumeship page

add the oc page
add lace

add teeth overlay


blank
yada


.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(""); 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;
}




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