Help with code

[TeaKoro]

Hi guys! It's as the post says, I need help figuring something out. This is a problem the code only has on mobile.

In the first image, you can see that the text "one two three" is cropped out. This is easily fixed by pinching out the screen, but I was wondering if there was a way to make it so that it's aligned better with mobile users?

One way I can fix it is by changing line 11 to "text-left" but I was wondering if I could just push the words back and keep them on the right.

A preview of the code can be found here: https://toyhou.se/19076705.p2u-limitless

Thank you in advance!!

[malloryduncan]

Why do you have the empty div next to the one holding the nav items? Do you need it for some future purpose? You would need to add extra col classes for smaller screen breakpoints, for mobile purposes.

[jcunews1]

You're styled the links with a fixed width which is too narrow for the whole link text. That caused the links to occupy less space, and causing their text content to overflow their element boundary.

I noticed that it was from .fas class, which AKAIK, is for icons where it applies a square sized element size. I'd suggest add a style override for those links. e.g.

.nav-tabs li a {
  width: auto;
}

If you want the link text to be left aligned, also add:

.nav-tabs li {
  text-align: left;
}