I'm trying to add teeth images over my embed site. Despite the size of the image, the main body of the site keeps overflowing to the right. I've already tried making any overflow-x in the body hidden but for some reason that cuts off the opposite half of my site.
I also tried making a container for my asset but that did absolutely nothing.
How can I stop this behavior?
Here is an image of what I'm talking about:
.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;}<div style=" float:; position: fixed; right: -200px; bottom: -1250px; z-index: 20; position: absolute; position: relative; pointer-events: none;"><div class="teeth1"><img src="teeth.png" /></div></div><div class="container"><div class="header">ndfsj</div><div class="main"><iframe src="https://anerdyartists.nekoweb.org/index.html" style="border: none" name="frame" height="100%" width="100%"></iframe></div><div class="aside"><aside><p>to do:</p><p>insert all the stamps type shit</p> add the yumeship page<p></p> add the oc page<p>add lace</p><p>add teeth overlay</p></aside></div><div class="nav"><nav>blank</nav></div><div class="footer">yada</div></div>