Typewriter effect and container sizing

I made a typewriter effect where text “types” onto the screen, backspaces, and writes different text. It works great, but it’s causing the width of any containers below to resize along with the typewriter text’s container.

      document.addEventListener("DOMContentLoaded", function () {
        var phrases = [
          "phrase 1",
          "phrase 2",
          "phrase 3",
          "phrase 4",
        ];

        var speed = 50;
        var flickerSpeed = 600;
        var pauseBetweenPhrases = 2000;

        var container = document.querySelector(".typewriter");
        var bar = document.querySelector(".typewriter-bar");
        var currentPhraseIndex = 0;
        var charIndex = 0;

        function typeWriter() {
          if (charIndex < phrases[currentPhraseIndex].length) {
            container.innerHTML +=
              phrases[currentPhraseIndex].charAt(charIndex);
            charIndex++;
            setTimeout(typeWriter, speed);
          } else {
            setTimeout(function () {
              backspace();
            }, pauseBetweenPhrases);
          }
        }

        function backspace() {
          if (charIndex >= 0) {
            container.innerHTML = phrases[currentPhraseIndex].substring(
              0,
              charIndex
            );
            charIndex--;
            setTimeout(backspace, speed);
          } else {
            currentPhraseIndex = (currentPhraseIndex + 1) % phrases.length;
            setTimeout(typeWriter, speed);
          }
        }

        function flicker() {
          bar.style.visibility =
            bar.style.visibility === "visible" ? "hidden" : "visible";
          setTimeout(flicker, flickerSpeed);
        }

        flicker();
        typeWriter(); // Start the typewriter effect
      });
    
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Hind Madurai', Arial, Helvetica, sans-serif;
}

h1 {
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  font-size: 10vh;
  line-height: 1;
}

h2 {
  font-family: 'Signika', Arial, Helvetica, sans-serif;
}

header {
  background-color: white;
  color: #222;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header h2 {
  margin: 0;
  font-weight: 300;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: right;
}

nav li {
  display: inline-block;
  margin-right: 20px;
}

nav a {
  text-decoration: none;
  color: #222;
  transition: color 0.3s ease;
}

nav a:hover {
  color: #3ca6a6;
  text-decoration: underline;
}

@media only screen and (max-width: 600px) {
  header {
    flex-direction: column;
    text-align: center;
  }
  nav {
    margin-top: 10px;
  }
  nav ul {
    flex-direction: column;
    text-align: center;
  }
  nav li {
    display: block;
    margin: 10px 0;
  }
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  position: relative;
  margin: 0;
  padding: 0;
}

.content {
  flex: 1;
}

footer {
  background-color: #026773;
  color: white;
  text-align: center;
  padding: 10px;
  position: relative;
  z-index: 1;
  margin-top: auto;
}

footer::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 400px;
  background: url(imgs/layered-peaks-haikei.svg) repeat-x;
  z-index: 2;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  padding: 10px;
  z-index: 999;
}

.typewriter {
  overflow: hidden;
  max-width: 800px;
  margin: 0 auto;
}

.typewriter-bar {
  border-right: 1px solid #222;
}
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Hind+Madurai:wght@300&family=Poppins:ital,wght@0,600;1,600&family=Signika:wght@300;400&display=swap"
      rel="stylesheet"
    />
    <div class="skip-link">
      <a class="visually-hidden" href="#main-content">Skip to Main Content</a>
    </div>
    <header>
      <h2>Name</h2>
      <nav>
        <ul>
          <li><a href="#">Welcome</a></li>
          <li><a href="#">Selected Work</a></li>
          <li><a href="#">Resume</a></li>
        </ul>
      </nav>
    </header>
    <main id="main-content" class="container">
      <div class="content">
        <div class="typewriter-container">
          <h1>
            I'm a <span class="typewriter"></span
            ><span class="typewriter-bar"></span>
          </h1>
        </div>
        <h2>Hi there!</h2>
      </div>
    </main>
    <footer></footer>

I’ve tried wrapping the typewriter portion inside it’s own container/div and assigning a width to that, but any subsequent containers still resize with it.