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

[Anonymous]

Я пытаюсь наложить черный элемент div (#semi-trans") на его родительский элемент (.img-контейнер), другой элемент div с фоновым изображением.
Край div должен идеально совпадать с фоном, но он выступает или короче. Я пробовал установить ширину на «inherit», «1rem» и «1em», но я подозреваю, что проблема связана с абсолютным позиционированием. как это исправить?
Заранее спасибо!

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

.img-container {
/* EDIT for code snippet */
/*  background-image: url(images/sparkle.jpg); */
background-image: url(https://placebear.com/500/500.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;
}

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

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

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