How to fix collection image padding issue in my code?

[tobyh4]

Hi,

I have edited some code to put each collection title on top of the corresponding image, however, my issue is that the text keeps wrapping as there seems to be padding on each side of the image and the text won't go the full way across it on one line.

This is what I mean: 

This is the code I have already written to achieve this:

<style>
ul#Slider-template--20911263318360__477125e9-4070-47c9-ab6d-93a16c1c6ed6 .full-unstyled-link{
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 26px; /* change this to adjust the text size */
  color: white;
  justify-content: center !important;
} /* Homepage collection text desktop */ 

</style>

Site link is: https://mauriciobenyar.myshopify.com/

Would really appreciate if someone could help,

Thanks

[Made4uo-Ribe · Accepted solution]

Hi @tobyh4 

Add this to your code. 

width: 100%;
text-align: center;

And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[tobyh4]

Thank you, works perfectly. 
Do you also know if I could add code to make the image opacity 60%?