サイズを一定に固定したい

https://tamesitamesi2.web.fc2.com/portforo/TEST.html

作りかけのサイトです。
小さいあらいぐまの画像や吹き出しを固定させたいのですが、ブラウザの横幅を動かすと画像が縮小したり吹き出しの位置が動いたりしてレイアウトが崩れてしまいます。

どうしたらいいのでしょうか？

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="https://tamesitamesi2.web.fc2.com/portforo/araiguma.css">
<link rel="stylesheet" href="https://tamesitamesi2.web.fc2.com/portforo/araiguma2.css">
</head>
<body>
<div class="hed">あらいぐまはかわいい</div>
<div class="center">
<div>
<div class="mozi1">哺乳綱食肉目アライグマ科アライグマ属に分類され る哺乳類です。<br />英語でProcyon lotorと書きます。</div>
<div><img src="https://tamesitamesi2.web.fc2.com/portforo/araiguma.jpg" /></div>
</div>
<div class="mozi2">食べ物をあらう器用な動物として有名なあらいぐま 。その実態とは！？</div>
<div>
<div class="position1"><img src="https://tamesitamesi2.web.fc2.com/portforo/araiguma_mini.png" class="gazou1" />
<div class="mozi3 balloon1-left">あらいぐまは狂暴！？</div>
</div>
<div>
<div class="position2">
<div class="mozi4">一見かわいいあらいぐま。<br />しかし、その本性は野生 そのものです。<br /><br /><br />その内容は「ぜったいに飼ってはい けない<br />アライグマ（さとう　まきこ著）」<br />でも描か れています。</div>
<div class="amazon1"><iframe width="300" height="150" style="width: 120px; height: 240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="https://rcm-fe.amazon-adsystem.com/e/cm?ref=qf_sp_asin_til&amp;t=amazon03c2-22&amp;m=amazon&amp;o=9&amp;p=8&amp;l=as1&amp;IS1=1&amp;detail=1&amp;asins=4652071817&amp;linkId=ad343fa98e31f40d240316f233f0b6a8&amp;bc1=ffffff&amp;lt1=_top&amp;fc1=333333&amp;lc1=0066c0&amp;bg1=ffffff&amp;f=ifr">
    </iframe></div>
</div>
<div class="mozi5">手が器用なので戸棚や引き出しを簡単に開けてしま います。<br />鋭い爪や牙で流血沙汰が日常茶飯事。<br /><br />人に 慣れる動物ではないため、ペットには向かないよう です。<br /><br />また、現在は特定外来生物に指定されている ため、飼育すると法律違反になります。 <br />野生のあらいぐまは多くの病気を媒介しているので 、<br />見かけたら触ろうとはせず逃げましょう。</div>
<div class="position3"><img src="https://tamesitamesi2.web.fc2.com/portforo/araiguma_mini.png" class="gazou2" />
<div class="mozi6 balloon1-left">でもあらいぐまはかわいい！</div>
</div>
<div class="youtube1"><iframe width="560" height="315" src="https://www.youtube.com/embed/P7VVIbmvA3U" frameborder="0" allow="accelerometer; autoplay; 
clipboard-write; encrypted-media; gyroscope; 
picture-in-picture" allowfullscreen="allowfullscreen"></iframe></div>
<div>わたあめを洗ってしまったあらいぐま</div>
<div>アライグマの四つの魅力</div>
<div>かわいい</div>
<div>よく 食べ、よく遊び、よく眠る</div>
<div>なんでも食べる（雑食）</div>
<div>ラスカルで有名</div>
<p><img src="https://tamesitamesi2.web.fc2.com/portforo/araiguma2.jpg" /></p>
<div>「九十九島動植物園 森きらら」では、餌をもらうた めに手をあげてアピールするあらいぐまが有名。 ぜひとも一度見に行きたい。</div>
<p>画像を何枚かスクロールする</p>
</div>
</div>
</div>
</body>
</html>

.hed {
position: fixed;
background: black;
width:100vw;
height:50px;
top: 0;
  left: 200; 
      color:white;
   display: flex;
  justify-content: center;
  align-items: center;
}
.center {
  margin-top:100px;
  text-align: center;
}
.mozi1 {
  margin-bottom:50px;
}
.mozi2 {
  margin-top:50px;
  margin-bottom:20px;
}
.position1 {
  position: relative; 
}
.gazou1{
  width: 10%;    /* 横幅を割合で指定 */
    height: auto;  /* 高さは自動指定 */
  position:absolute;  left:260px; 
}
.mozi3 {
   position:absolute;  top: 15px; left:90px;
  font-size: 50px;
    font-weight：bold;
}
.balloon1-left {
  position: relative;
  display: inline-block;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  background: #adff2f;
}

.balloon1-left:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 15px solid #adff2f;
}

.balloon1-left p {
  margin: 0;
  padding: 0;
}
.position2 {
  position: relative; 
}
.mozi4 {
    position:absolute;  top: 30px; left:350px;
text-align: left;
}
.amazon1 {
  position:absolute;  top: 30px; left:700px;
}
.mozi5 {padding-top:300px }
.position3 {
    position: relative; 
}
.gazou2{
  width: 10%;    /* 横幅を割合で指定 */
    height: auto;  /* 高さは自動指定 */
  position:absolute;  top: 10px; left:230px; 
}
.mozi6 {
   position:absolute;  top: 25px; left:350px;
  font-size: 50px;
    font-weight：bold;
}

.youtube1 {padding-top:150px;}
.mozi7 {
  padding-top:30px;
}

どうぞよろしくお願い致します

行動規範の内容に同意します

回答2件

私が作る感じでしたら、ご参考までに

HTML
1      <div class="position1">
2        <div>
3          <img class="gazou1" src="./image/araiguma_mini.png" />
4          <div class="mozi3 balloon1-left">あらいぐまは狂暴！？
5          </div>
6        </div>
7      </div>
8      <div>

css
1  .position1 {
2    display: flex;
3  }
4  .gazou1{
5    width: 10%;    /* 横幅を割合で指定 */
6    height: auto;  /* 高さは自動指定 */
7  }
8  .mozi3 {
9    font-size: 5vw;
10    font-weight:bold;
11  }