Background-rgba не работает на простом фрагменте?

Question

Пробовал это в течение получаса сейчас, и я до сих пор не понимаю, почему такой простой фрагмент не будет иметь цвет фона:

#section3 {
  z-index: 5;
  overflow: hidden;
  width: 100%;
  height: auto;
  background-color: rgba(0, 0, 0, 1);
}

h3 {
  position: relative;
  text-align: center;
  margin-top: 10vh;
  font-size: 2em;
}

<span id="section3">
    <h3>Unser Anspruch</h3>
</span>

JSFiddle

Answer 1

span является элементом встроенного блока, поэтому ему не может быть задана высота

Порядок присвоения ему высоты, вам придется преобразовать его в display:block или display:inline block

* 1007.* Но, как сказал @LGSon, h3 никогда не следует помещать внутрь span элемента

Вместо использования span, используйте div, так как div по умолчанию display:block

#section3 {
    z-index: 5;
    overflow: hidden;
    width: 100%;
    height: auto;
    background-color: rgba(250,0,0,1);
   }

h3{

    position: relative;
    text-align: center;
    margin-top:10vh;
    font-size: 2em;

}

<div id="section3">

            <h3>Unser Anspruch</h3>
</div>