Bootstrap - tło tekstu w jumbotronie

Question

Cześć! Jestem nowy na forum, wcześniej czytałem, ale jak zwykle bez konta :D Tworzę ziomkowi stronę, prostą, z danymi kontaktowymi etc. Używam vanilla html/css + bootstrap żeby się nie pieprzyć z ustawianiem wszystkich elementów i tu nagle zonk: w jumbotronie w tle mam fotkę, i tekst brzydko na tym wygląda więc wrzuciłem w tło h1 i p szary kolor z opacity, ale boxy tych elementów są na szerokość containera nawet jak je modyfikuje (grrr). Przejrzałem inne tematy, główny plik bootstrap.css i nie wiem czemu się tak dzieje. Po drugie, może da się to ładniej zrobić? Naprowadzicie na jakieś rozwiązanie? Będę bardzo wdzięczny :D

html:

    <div class="jumbotron">
      <div class="container">
          <h1 class="opa">Company Name</h1>
          <p class="opa">Modern, innovative cleaning company that will handle your mess in no time!</p>
          <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
      </div>
    </div>

css:

h1.opa, p.opa {
	padding: 10px 20px;
	border-radius: 5px;
	background-color: rgba(80, 80, 80, 0.5);
}

Mam ściagniętego bootstrapa, ale i tak linkuje za pomocą:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Lepiej cdn czy z dysku podawać ścieżkę?

Jak coś niejasno wyjaśniłem - pytajcie śmiało

Answer 1

Dodaj do css-a display: table; i będzie działać :D
Dzieje się tak bo p i h1 są przedstawiane jako block i ich width jest rozciągnięty na szerokość rodzica.
Lepiej używać cdn :D