title: Why does the container of this text so much wider than it should be?
body: <p>I am building an effect for a website and I wanted to add a typewriter-like effect. The code looks like this.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>typed-out {
    overflow: hidden;
    border-right: initial;
    font-size: 4.6rem;
    width: 0;
    white-space: nowrap;
    animation: typing 1.5s steps(30, end) forwards;
  }
  
  .container-type {
    display: inline-block;
    vertical-align: top;
  }
  
  .welcome {
    overflow: hidden;
    border-right: initial;
    font-size: 3rem;
    width: 0;
    white-space: nowrap;
    animation: typing_2 1.5s steps(25, end) forwards, blinking 1s infinite;
    animation-delay: 8s;
  }
  
  .container-type-welcome {
    display: inline-block;
    vertical-align: bottom;
  }
  
  @keyframes typing {
    from {
      width: 0;
      /*non: initial;*/
      border-right: .15em solid var(--sunshine);
    }
    to {
      width: 100%;
      border-right: initial;
    }
    99% {
      border-right: .15em solid var(--sunshine);
    }
    100% {
      border-right: initial;
    }
  }
  
  @keyframes blinking {
    from {
      border-color: transparent;
    }
    to {
      border-color: orange;
    }
  }
  
  @keyframes typing_2 {
    from {
      width: 0;
      border-right: .15em solid var(--sunshine);
    }
    to {
      width: 100%;
      border-right: .15em solid var(--sunshine);
    }
    99% {
      /*border-right: .15em solid var(--sunshine);*/
    }
    100% {}
  }
  
  .welcome-1 {
    overflow: hidden;
    border-right: initial;
    font-size: 2rem;
    width: 0;
    white-space: nowrap;
    animation: typing 1.5s steps(25, end) forwards, blinking 1s infinite;
    animation-delay: 1.5s;
  }
  
  .text_main_1 {
    overflow: hidden;
    border-right: initial;
    font-size: 1.5rem;
    width: 0;
    white-space: nowrap;
    animation: typing 1.5s steps(25, end) forwards, blinking 1s infinite;
    animation-delay: 3.5s;
  }
  
  .text_main_2 {
    overflow: hidden;
    border-right: initial;
    font-size: 1.5rem;
    width: 0;
    white-space: nowrap;
    animation: typing 1.5s steps(25, end) forwards, blinking 1s infinite;
    animation-delay: 5s;
  }
  
  .I-AM {
    overflow: hidden;
    border-right: initial;
    font-size: 2rem;
    width: 0;
    white-space: nowrap;
    animation: typing .35s steps(5, end) forwards, blinking 1s infinite;
    animation-delay: 3s;
  }
  
  .text_main_3 {
    overflow: hidden;
    border-right: initial;
    font-size: 1.5rem;
    width: 0;
    white-space: nowrap;
    animation: typing 1.5s steps(25, end) forwards, blinking 1s infinite;
    animation-delay: 6.5s;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container-type"&gt;
    &lt;p class="welcome-1" style="text-align: left;margin-left: 3vw;"&gt;I'm an aspiring developer!&lt;/p&gt;
    &lt;div class="container-type"&gt;
      &lt;p class="I-AM" style="text-align: left;margin-left: 3vw;"&gt;I Am:&lt;/p&gt;
      &lt;div class="container-type"&gt;
        &lt;p class="text_main_1" style="text-align: left;margin-left: 6vw;"&gt;A Full Stack Engineer&lt;/p&gt;
        &lt;div class="container-type"&gt;
          &lt;p class="text_main_2" style="text-align: left;margin-left: 6vw;"&gt;A C++ and C# Programmer&lt;/p&gt;
          &lt;div class="container-type"&gt;
            &lt;p class="text_main_3" style="text-align: left;margin-left: 6vw;"&gt;And some more!&lt;/p&gt;
            &lt;div class="container-type"&gt;
              &lt;p class="welcome" style="text-align: left;margin-left: 3vw;"&gt;Finally, Welcome!&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>But unfortunately, the final effect messes up and the typing head goes too far. Here's a video to show the effect.<a href="https://i.stack.imgur.com/60oiL.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/60oiL.gif" alt="Video" /></a>
  And yes I know it's an adobe preview! It's just a placeholder. Haha!</p>