How do I keep all contents INSIDE the div?

I'm trying to make an Ebay template. But I have spent 2 whole days (literally) to make everything to stay INSIDE the "frame" div.

But when I resize the page or someone checks it on the phone, all the junk like images and shapes (border items) are all over the place on the white page outside the maroon frame.

I just want everything to be cemented down onto that one div as if it is a canvas and not move nor resize when I resize the browser.

P.S. The cig will not puff due to it being blocked by something. I'm pretty new to this so I'm clueless.

IMPORTANT*: This website does not display my code properly for some reason. Please copy and paste both html and css sections into https://htmledit.squarefree.com/ to view and see what I see. This site's html viewer is too goofy.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.Frame {
  background-color: black;
  border: solid 20px maroon;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.header {
  border: solid 1px red;
  color: Red;
  background-color: ;
  height: 60px;
  width: 899;
  font-size: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: cursive;
}

.cigbutt {
  border: solid 3px white;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  margin-left: 510px;
  margin-top: -30px;
  background-color: 7B2424;
  transition: 2.5s;
}

.cigbutt:hover {
  background-color: BF3D12;
}

.cigbutt:active {
  background-color: EE4007;
}

.moretext {
  color: white;
  text-align: right;
  margin-left: 450px;
  margin-top: -90px;
  width: 160px;
}

.text {
  color: white;
  width: 400px;
}

.img1 {
  margin-top: -50px;
  margin-left: 640px;
  width: 250px;
  height: 400px;
}

<!-- language: lang-html -->

<div class = Frame>

<div class = Header>
Hot Girls And Cigarette Butts
</div>

<br> <br>

<div class = text>
I do not know what to put down so here as an example so here is a hot girl and an interactive circle that looks and acts like a cigarette butt. Please notice how the frame moves but everything else just magically hovers.
</div>

<div class = cigbutt>

</div>

<div class = moretext>
hover over circle to light long press circle to puff
</div>


<img class = img1 src = "https://optimize.webmavens.in/?key=1949128684&url=https://prodimages.everythingneon.com/giant/n105-1565-pole-dance-girls-1-neon-sign.jpg"></img>


<div style = "margin-top: 100px;"></div>

<br>



</div>

<!-- end snippet -->

The Primary Mistakes:

1. The attributes such as class must have quotes ("") for their value. So you did class=Frame but it should be class="Frame"
2. There are some lines in your CSS that did not end properly. Please make sure to have ; at the end of each line.
3. The background colors are in HEX, so they must start with a hash #

The main reason

1. You are using hard-coded units like px for positioning and stylings. Thus it does not scale well, use dynamic units (e.g. em, % etc) for these.
2. There are some places where you should have used positioning and flexbox etc instead of margin to create the layout. even your cigbutt animation was not working due to using margins like that.
3. There are just too many to actually count and say. so I'll provide the fixed code now

Fixed code

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.Frame {
  background-color: black;
  border: solid 20px maroon;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  isolation: isolate;
}

.Header {
  border: solid 1px red;
  color: Red;
  height: 60px;
  width: 100%;
  font-size: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: cursive;
}

.wrapper {
  display: flex;
  gap: 2em;
}

.cigbutt {
  border: solid 3px white;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  background-color: #7B2424;
  transition: 2.5s;
}

.cigbutt:hover {
  background-color: #BF3D12;
}

.cigbutt:active {
  background-color: #EE4007;
}

.moretext {
  color: white;
  text-align: right;
  width: 160px;
}

.text {
  color: white;
  width: 400px;
  padding: 10px;
}

.img1 {
  position: absolute;
  top: 10%;
  right: 0;
  width: 250px;
  height: 400px;
  max-height: 90%;
  z-index: -1;
}

<!-- language: lang-html -->

<div class="Frame">

  <div class="Header">
    Hot Girls And Cigarette Butts
  </div>

  <br> <br>

  <div class="wrapper">
    <div class="text">
      I do not know what to put down so here as an example so here is a hot girl and an interactive circle that looks and acts like a cigarette butt. Please notice how the frame moves but everything else just magically hovers.
    </div>

    <div style="display: flex; flex-direction: column; align-items: center; gap: 10px;">
      <div class="cigbutt">

      </div>

      <div class="moretext">
        hover over circle to light long press circle to puff
      </div>
    </div>


    <img class="img1" src="https://optimize.webmavens.in/?key=1949128684&url=https://prodimages.everythingneon.com/giant/n105-1565-pole-dance-girls-1-neon-sign.jpg"></img>

  </div>

  <div style="margin-top: 100px;"></div>

  <br>



</div>

<!-- end snippet -->