Text is not centered on small devices

I am doing a front end challenge using HTML and CSS, In the website I have this text:

enter image description here

The above image Is a screenshot from a web view, I need to keep the text centered horizontally when you open the website on a mobile device.

Current output:

enter image description here


As you can see in the images, the smaller the screen will get the more the text will go to the left of the screen

Things that I have done so far:

I have seen here and here that I can do it like this:

  width:100%;
  display: flex;
  justify-content: center;

SO I have tried to do so:

<p class="top-paragprph colorWhite bold">All your files in one secure location,<br> accessible anywhere.</p>
.top-paragprph{
  font-size: 32px;
  width: 100%;
  display: flex;
  justify-content: center;
}

But it did not work for me.

From what I have been reading it seems like flex is the modern and easy way to do so, why on my example the text is not centered on a smaller screen size?



Read more here: https://stackoverflow.com/questions/68483136/text-is-not-centered-on-small-devices

Content Attribution

This content was originally published by Tamir Abutbul at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: