How do I make the space stop? Guys pls fix this! Idk how to fix this. It just keeps giving some space until it stops

Question

https://sololearn.com/compiler-playground/WyWIutQyS1SB/?ref=app

Answer 1

The Main issue with your code is that you forgot the body style.

body {
background: #333;
padding-top: 5em;
display: flex;
justify-content: center;
}

---
Be sure to credit the original author or leave a source as a reference.
https://css-tricks.com/snippets/css/typewriter-effect/

Answer 2

To top comment literally saved me

Answer 3

I don't see the issue here

Answer 4

I wasn't liying I swear it just gives me space at the end like whaaatt

Answer 5

Does it complete the text tho???

Answer 6

I'm sure it's because, the width of the typing animation is set to 100% and hence it ends width with at 100%,

If you increase the letter-spacing, all the text letters won't be able to fit in that width making only what can fit to it visible,

on the other hand if you reduce it and everything fits and there's still space to the right, the blink-caret will be visible at 100% of the width, making you feel like there's space between it an the last character of the text.

Hence, no error.

Answer 7

.typewriter {
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid orange; /* The typewriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em; /* Adjust as needed */
animation:
typing 3s steps(35, end),
blink-caret .15s step-end infinite;
color:white;
}

/* The typing effect */
@keyframes typing {
from { width: 0 }
to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange; }
}
body {
background-color:#343f4f;
}
.helo {
color:#353f5f;
}
Just remove the h1 after the container as the container needs animation not the text. I hope it helps!