Bei mir funktioniert display: inline-block; schon, in dieser Demo nimmt der Container nur den Platz entspr. dem Inhalt ein und ist zentriert ausgerichtet:
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
ul.slides li {
text-align: center;
}
ul.slides {
list-style-type: none;
}
.container {
display: inline-block;
}
</style>
</head>
<body>
<div class="hero hero-slider">
<ul class="slides">
<li data-bg-image="images/dia0.jpg">
<div class="container" style="background:rgba(21,18,21,0.7)">
<h2 class="slider-title">Willkommen</h2>
<p>Text ...</p>
<p>Text ...</p>
</div>
</li>
</ul>
</div>
</body>
</html>
Das ist natürlich blöd. Ich hatte es auch getestet und zufällig ein Beispiel mit px gewählt, so dass mir dies nicht aufgefallen ist. Dann kommt dieser Weg für dich also nicht in Frage.