How can I resize the entirety of a webpage's content if it exceeds the width of the browser window? (without changing the item positioning at all))

Probably not the best way to ask what I'm asking but I don't really know how else to say it. I have this recreation of the sega.com website from 1996. I tried to remake the layout without using tables like it used to and I think it looks alright.
But the problem is that now, if I shrink my browser window to be less than 550px wide. the page's content just goes past the sides of the window, which isn't ideal.

Since the layout and positioning of everything is important on the page, I would like to make it so when the device's width is smaller than the page's width (550px), the whole page and it's contents will scale itself down to fit within that width without changing the position or relative sizes of the content.

This is what the site looks like: sega.com website recreation

this is what it does when it's resized to less than it's width: sega.com website extending past browser boundaries

here is an approximation of what I want the website to do (done by using ctrl + -): sega.com website zoomed out in a small browser window.

and here's the code, all the css is in the html file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Welcome to Sega Online</title>

  <style>
        body {
            height: 100%;
      background-color: #000000;
        }
        .wrapper {
            display: flex;
        align-items: center;
        justify-content: center;
      height: 100%;
            margin: auto;
        }
    .container {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
        justify-content: center;
      width: 550px;
    }
    .toprow {
      display: flex;
      align-items: center;
      flex-direction: row;
      justify-content: space-between;
      text-align: center;
    }
    </style>
</head>
<body text="FFFFFF" link="FFFFFF" vlink="CCE6FF" style="text-decoration: none;">

  <audio src="/sega/sega.mp3" autoplay="true"></audio>

  <div class="wrapper">

    <div class="container" >
      <div class="toprow">
        <a style="width: 205px;"href=""><b>Want to get in on the greatest video game promotion ever?</b></a>
        <a style="font-size:0" href=""><img src="/sega/img/spotlight.gif"></a>
        <b style="width: 205px;"><a style="width: 240px;" href="">A low-cost, easy-to-use alternative to access the World Wide Web using your Sega Saturn</a>!</b>
      </div>

      <a style="font-size:0" href=""><img src="/sega/img/buzz.gif"></a>
      <a style="font-size:0" href=""><img src="/sega/img/centernew.gif"></a>
      <a style="font-size:0" href=""><img src="/sega/img/games.gif"></a>

      <a style="font-size:0" href=""><img src="/sega/img/central.gif"></a>
      <a style="font-size:0" href=""><img src="/sega/img/recroom.gif"></a>
    </div>

  </div>
  
</body>
</html>

I tried a lot of different techniques and solutions and a lot of them straight up didn't work or didn't really have the effect I was looking for. I looked online as well to see if anyone had the same thing but to no avail.
I mainly tried using flex boxes to hold the page's content but everything always remained a constant width.

P.S. I have 0 professional programming experience so there are probably things I missed or didn't do correctly. Feel free to equally suggest better ways to structure my code.

Solution

Set a scale factor on the root element of the viewport width divided by the content width. The code below takes the content width to be 566px. That's 550px for the .container element and 16px for the default body margins. The scale is set to a maximum of 1.

See https://dev.to/janeori/css-type-casting-to-numeric-tanatan2-scalars-582j for a description of the tan(atan2(...)) hack to calculate a scalar value by the division of two lengths.

@property --1lvw {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}
html {
  --1lvw: 100vw;
  --1cw: 566px; /* 550px design width + 16px body margin */ 
  --factor: min(tan(atan2(var(--1lvw), var(--1cw))), 1);
  scale: var(--factor);
  transform-origin: center 0;
}

body {
  height: 100%;
  background-color: #000000;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: auto;
}
.container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  width: 550px;
}
.toprow {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Welcome to Sega Online</title>
</head>
<body text="FFFFFF" link="FFFFFF" vlink="CCE6FF" style="text-decoration: none;">
  <div class="wrapper">

    <div class="container" >
      <div class="toprow">
        <a style="width: 205px;"href=""><b>Want to get in on the greatest video game promotion ever?</b></a>
        <a style="font-size:0" href=""><img src="https://placehold.co/100"></a>
        <b style="width: 205px;"><a style="width: 240px;" href="">A low-cost, easy-to-use alternative to access the World Wide Web using your Sega Saturn</a>!</b>
      </div>

      <a style="font-size:0" href=""><img src="https://placehold.co/100"></a>
      <a style="font-size:0" href=""><img src="https://placehold.co/100"></a>
      <a style="font-size:0" href=""><img src="https://placehold.co/100"></a>

      <a style="font-size:0" href=""><img src="https://placehold.co/100"></a>
      <a style="font-size:0" href=""><img src="https://placehold.co/100"></a>
    </div>

  </div>
  
</body>
</html>