TL;DR: big elements cause annoying scroll-bars to appear.

My username is very big, so when I open this page on a mobile I get a horizontal scroll-bar for the entire page.

In CSS there’s a property called overflow which lets you decide how you want elements that contain elements wider or taller than them to behave. So you can solve this problem by simply making that element itself scroll instead of the entire page by using overflow: scroll, or hide the child elements by using overflow: hidden;.

You can also solve these problems by dealing with the child elements for example: using the word-wrap property to allow word wrapping, using the hyphens property to break words with hyphens, or in this case use the HTML wbr tag to allow line breaking after every underscore, or even cut the longer words and append three dots to them; so my user name would look like this: “Limitless_s…”.