I would like to add a box shadow behind all my nectar slider header text. I found the code to do so, but the box spans the whole page instead of where the text ends. Please advise what I should add to the code to adjust this and how do I adjust the text size. I'd like to do this right in the CSS style sheet so I don't have to manually code each page individually.  The code i'm using is below:

.swiper-slide {

position: relative;

background-position: center;

background-repeat: no-repeat;

background-size: cover;

-moz-background-size: cover;

-webkit-background-size: cover;

-o-background-size: cover;

}

.swiper-slide .content h2 { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5); box-shadow: 5px 0 0 rgba(0, 0, 0, 0.5), -10px 0 0 rgba(0, 0, 0, 0.5); display: inline; left: 10px; line-height: 85px; padding: 4px 0; }

Thank you. When I went to that FAQ it says its for mobile text scaling. I"m looking to have the box shadow behind the text formatted to fit the text length. Right now the box goes across the entire page. I'm a novice at coding so further guidance is much appreciated. Thank you

Ps. added a quick pic of the black box going across

www.slatermill.org

I changed the "width" under the css code to 36%, but I would still prefer the black box behind the header text to automatically adjust to the length of the text. Any further help is much appreciated. I feel like i'm almost there.

.swiper-slide .content {

color: #fff;

width: 36%;

left: 0px;

position: absolute;

top: 250px;

z-index: 100;

}