Почему ширина моего элемента не наследует правильно ширину родительского элемента? ⇐ CSS

[Anonymous]

Я пытаюсь наложить черный элемент div (#semi-trans") на его родительский элемент (.img-контейнер), другой элемент div с фоновым изображением. Это HTML.

Код: Выделить всё

/*html*/

[img]images/odin-lined.png[/img]
ODIN

Край элемента div должен идеально совпадать с фоном, но он выступает наружу или короче. Я попытался установить ширину «inherit», «1rem» и «1em», но это не работает. Я подозреваю, что проблема связана с абсолютным позиционированием. Как это исправить? Вот CSS:

Код: Выделить всё

/*css*/
.img-container {
background-image: url(images/sparkle.jpg);
width: clamp(500px, 800px, 1100px);
height: 100vh;
background-size: cover;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-bottom: 12px;
}

#semi-trans {
position: absolute;
background-color: black;
opacity: 0.5;
width: inherit;
height: 80px;
z-index: 10;
}

Заранее спасибо!

Подробнее здесь: https://stackoverflow.com/questions/793 ... -correctly