Hero slider with centered h1 and h3

Hello. Sorry to bother you but I’ve spent the whole evening and am stuck.

I am trying to add text on top of a Hero slider. In the Content section I have added one h1 (that shows correctly) and one h3 with a color background. I’ve set the h3 to display:table to keep the coloured background tight around the text. No matter what I do the h3 aligns to the left. If I change the sliders max-width I can force it more to the center. I have added rows with parallax images with centred h3 displayed as display:table to other pages, but I can’t manage it with the Hero slider.

This is what it looks like

CSS not working

.sow-slider-image-wrapper h3 {

	font-size: 1.4rem !important;
	text-transform: uppercase;
	background: rgba(237, 30, 37,0.4);
	display: table;
	margin: auto;
text-align: center !important;
}

This is what I want (this is not a Hero slider, but row with a parallax image background).

CSS for this (works), I’ve added the class .top-parallax to the row

div.top-parallax h3
        {
        color: #fff; 
        background: rgba(237, 30, 37, 0.6);
	font-size: 24px !important;
	display: table;
    	line-height: 28px;
	margin: auto;
	padding: 0 3px;
	text-transform: uppercase;
	text-align: center !important;
}

Any help would be much appreciated.