title: Trying to create box container around text on Bootstrap Carousel
body: <p>I have some text on top of my images for my carousel shown below.</p>
  
  <p><a href="https://i.stack.imgur.com/jJtlJ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jJtlJ.jpg" alt="enter image description here"></a></p>
  
  <p>I want to add a box around the text with some opacity so it is easier to read. I've tried some things but the box takes a weird shape as it starts to scale down.</p>
  
  <p>Here is my html for my Carousel:</p>
  
  <pre><code>&lt;!-- Carousel --&gt;
  &lt;header id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel"&gt;
       &lt;!-- Indicators --&gt;
      &lt;ol class="carousel-indicators"&gt;
          &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
      &lt;/ol&gt;
  
      &lt;!-- Wrapper for Slides --&gt;
      &lt;div class="carousel-inner" role="listbox"&gt;
          &lt;div class="item active"&gt;
              &lt;!-- Set the first background image using inline CSS below. --&gt;
              &lt;img src="img/golden_egg3.jpg" class="img-responsive first-slide" alt="First slide"&gt;
                  &lt;div class="container"&gt;
                      &lt;div class="carousel-caption"&gt;
                          &lt;div class="caption-one"&gt;
                              &lt;h1&gt;The right Wealth Advisor can make a big difference.&lt;/h1&gt;
                              &lt;br&gt;
                              &lt;a href="contact.html" class="btn btn-primary btn-lg hvr-underline-from-left" role="button"&gt;Learn More&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="item"&gt;
              &lt;!-- Set the first background image using inline CSS below. --&gt;
              &lt;img src="img/graph_in_hand3.jpg" class="img-responsive second-slide" alt="Second slide"&gt;
                  &lt;div class="container"&gt;
                      &lt;div class="carousel-caption"&gt;
                          &lt;div class="caption-two"&gt;
                              &lt;h1&gt;Personal Wealth Planning is not&lt;br&gt; just charts and graphs, it's about&lt;br&gt; taking control of your financial future.&lt;/h1&gt;
                              &lt;a class="btn btn-lg btn-primary hvr-underline-from-left" href="contact.html" role="button"&gt;Learn More&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="item"&gt;
              &lt;!-- Set the first background image using inline CSS below. --&gt;
              &lt;img src="img/jar_with_coins3.jpg" class="img-responsive third-slide" alt="Third slide"&gt;
                  &lt;div class="container"&gt;
                      &lt;div class="carousel-caption"&gt;
                          &lt;div class="caption-three"&gt;
                              &lt;h1&gt;Successful investing takes&lt;br&gt; time, discipline and patience.&lt;/h1&gt;
                              &lt;a class="btn btn-lg btn-primary hvr-underline-from-left" href="contact.html" role="button"&gt;Learn More&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"&gt;
      &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"&gt;
      &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Next&lt;/span&gt;
    &lt;/a&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>For my class <code>.caption-one</code> which is my first image I applied the following CSS:</p>
  
  <pre><code>.caption-one {
        background-color: #282828;
        opacity: 0.75;
        padding-left: 2%;
        margin-right: 38%;
        padding-bottom: 2%;
        width: 40%;
  }
  </code></pre>
  
  <p>And this is what I get:</p>
  
  <p><a href="https://i.stack.imgur.com/QZCXf.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QZCXf.jpg" alt="enter image description here"></a></p>
  
  <p>Looks okay but definitely could be better. Here it is on mobile:</p>
  
  <p><a href="https://i.stack.imgur.com/RLYOH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RLYOH.png" alt="enter image description here"></a></p>
  
  <p>Even worse. I have no clue why my button is so big because I use this same button for the contact page and it scales very nicely. Any help is much appreciated.</p>