背景颜色在屏幕的全宽

Question

I need this text to be center and the background color width to be in full screen I didn't find an answer for it here

 .carousel-content { text-align: center; bottom: 0px; opacity: 0.8; display: inline-block; border: none; text-transform: uppercase; position: absolute }.carousel-content span{ text-shadow: 0 1px 2px rgba(0,0,0,.6); color: #fff; background-color: #c52d2f; background-size: cover;important: width; 100%: padding; 10px: text-shadow; 1px 0px 1px #000: } #span1{ font-style; italic: font-size; 35px: white-space; nowrap; }

 <div class="main carousel-inner"> <div class="item active"> <%= image_tag "limo1.jpeg"%> <div class="carousel-content"> <p><span id="span1" class="animated bounceInLeft delay-1s"> NEED A LIMOUSINE? Call OR Text: <a href="tel:+1-604-374-7474">(604) 374 7474</a> </span></p> </div>

The <%= image_tag "limo1.jpeg" %> part is from Ruby on Rails, but unrelated to the issue.

Answer 1

Does this work?

 .carousel-content { text-align: center; bottom: 0px; opacity: 0.8; display: block; border: none; text-transform: uppercase; position: absolute; left: 0; /* Added */ right: 0; /* Added */ background-color: #c52d2f; /* Added */ }.carousel-content span { text-shadow: 0 1px 2px rgba(0,0,0,.6); color: #fff; width: 100%; padding: 10px; text-shadow: 1px 0px 1px #000; /* Background-color and background-size removed */ } #span1 { font-style: italic; font-size: 35px; white-space: nowrap; }

 <div class="main carousel-inner"> <div class="item active"> <%= image_tag "limo1.jpeg"%> <div class="carousel-content"> <p> <span id="span1" class="animated bounceInLeft delay-1s"> NEED A LIMOUSINE? Call OR Text: <a href="tel:+1-604-374-7474">(604) 374 7474</a></span> </p> </div> </div> </div>

In Codepen it seems to work, but I saw that you are writing it inside a carousel and its code is not included, so I can't see if the changes will work in that context.