ARTICLE AD BOX
So Im trying to add these rad teeth assets I made over my embed site just to make it look cool. For some reason despite the size of the image the main body of the site keeps overflowing to the right. Ive 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. I just want some rad assets, how do I stop this? (ignore how ugly it looks so far Im like 4 days into making the site) what it looks like
<style>.teeth1{ overflow-x:hidden; max-width:727px; max-height:240; }</style> <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> <style> .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; } </style>
