user2997418 user2997418 - 1 month ago 6
CSS Question

CSS: extend the text background to the container width

I have a text in a cell, I want to make a background color, but I want that the color width takes the width of the container div, not of the text.
enter image description here

HTML:

<div class='col-md-4'>
<span class='section'>Remove Members:</span>
</div>


CSS:

.section{
background-color: #f7a7af;
width: 100%;
background-size: contain;
}

Answer

You need to change display of span to inline-block because by default span has display: inline and you cannot set width on inline elements.

.col-md-4 {
  width: 300px;
  background: lightblue;
}
.section {
  background-color: #f7a7af;
  width: 100%;
  display: inline-block;
}
<div class='col-md-4'>
  <span class='section'>Remove Members:</span>
</div>

Comments