title: My bootstrap carousel background image doesn't adjust with the browser window size
body: <p>Okay so I'm new to programming and I've been embarking on a project where I'm developing the front end for a personal website. I decided to use a bootstrap carousel background image slider in my index.html but the size of the page tends to shrink and the carousel text also shrinks and overlaps when I adjust my browser screen.</p>
  
  <p><a href="https://i.stack.imgur.com/AdrDj.jpg" rel="nofollow noreferrer">so this is a link to what I'm trying to say</a></p>
  
  <p>my code is like this </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
      margin-top: 20px;
  }
  
  .navbar{
    background-color : #3e403e;
  }
  
  .text h1{
      font-size: 110px
  }
  
  .text p{
      font-size: 40px
  }
  
  hr{
      background-color: white
  
  }
  
  
  .text a{
  padding: 15px 80px 15px 80px;
  }
  
  .header-text {
      position: absolute;
      top: 20%;
      left: 1.8%;
      right: auto;
      width: 96.66666666666666%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="indexCarousel" class="carousel slide" data-ride="carousel"&gt;
      &lt;div class="carousel-inner"&gt;
          &lt;div class="carousel-item active"&gt;
              &lt;img class="d-block w-100" src="images/background.png" alt="Slide One"&gt;
          &lt;/div&gt;
  
          &lt;div class="carousel-item"&gt;
              &lt;img class="d-block w-100" src="images/background 2.png" alt="Slide Two"&gt;
          &lt;/div&gt;
  
          &lt;div class="carousel-item"&gt;
              &lt;img class="d-block w-100" src="images/background 3.png" alt="Slide Three"&gt;
          &lt;/div&gt;
          &lt;div class="header-text hidden-xs"&gt;
              &lt;div class="col-md-12 text center"&gt;
                  &lt;div class="container"&gt;
                      &lt;div class="text"&gt;
                          &lt;h1 class="display-4" style="color:white"&gt;&lt;strong&gt;Beats, Sounds Vibes!!!&lt;/strong&gt;&lt;/h1&gt;
                          &lt;p class="lead" style=" color:white"&gt;What are you waiting for?&lt;/p&gt;
                          &lt;hr class="my-4"&gt;
                          &lt;p style="color: white"&gt;XQ's music is made from the purest selection of industry-level sounds
                              and
                              samples. Vibe with him, and you"ll see what we're talking about.&lt;/p&gt;
                          &lt;a class="btn btn-primary btn-lg" href="beats.html" role="button"&gt;Dive in&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'll appreciate help.</p>