title: how to change collapse inside collapse background color with different width inside. Accordion from bootstrap 4.5
body: <pre><code>          &lt;link rel="stylesheet" 
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" 
  crossorigin="anonymous"&gt;
  &lt;script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
      integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
      crossorigin="anonymous"&gt;&lt;/script&gt;
  
  
  
  &lt;div class="card"&gt;
          &lt;div class="card-header" id="headingOne"&gt;
            &lt;h5 class="mb-0"&gt;
              &lt;button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria- 
  expanded="true" aria-controls="collapseOne"&gt;
                              Collapsible Group Item #1
                          &lt;/button&gt;
            &lt;/h5&gt;
          &lt;/div&gt;
  
          &lt;div id="collapseOne" class="collapse show text-center" aria-labelledby="headingOne" 
   style="width:300px; background-color: yellow; margin:auto;"&gt;
            &lt;div class="card-body"&gt;
              &lt;div class="card"&gt;
                &lt;div class="card-header text-center" id="headingTwo" &gt;
                  &lt;h5 class="mb-0"&gt;
                    &lt;button class="btn btn-link collapsed text-center" data- toggle="collapse" data- 
   target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="width:300px;"&gt;
                                          Collapsible Group Item #2
                                      &lt;/button&gt;
                  &lt;/h5&gt;
                &lt;/div&gt;
                &lt;div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo"&gt;
                  &lt;div class="card-body"&gt;
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus wolf moon 
  officia aute, non cupidatat skateboard dolor brunch. Food eiusmod. Brunch 3 wolf moon tempor, sunt 
  aliqua put a bird on it assumenda shoreditch et. Nihil anim keffiyeh helvetica,
                    craft beer sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings 
  farm-to-table, raw denim aesthetic synth nesciunt you probably labore sustainable VHS.
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="card"&gt;
          &lt;div class="card-header" id="headingThree"&gt;
            &lt;h5 class="mb-0"&gt;
              &lt;button class="btn btn-link collapsed" data-toggle="collapse" data- 
   target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"&gt;
                              Collapsible Group Item #3
                          &lt;/button&gt;
            &lt;/h5&gt;
          &lt;/div&gt;
          &lt;div id="collapseThree" class="collapse" aria-labelledby="headingThree"&gt;
            &lt;div class="card-body"&gt;
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry wolf moon 
  officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa eiusmod. Brunch 3 wolf moon 
  tempor, sunt aliqua put a bird on it squid single- assumenda shoreditch
              et. Nihil anim keffiyeh helvetica, craft beer labore wes sapiente ea proident. Ad vegan 
  excepteur butcher vice lomo. Leggings occaecat farm-to-table, raw denim aesthetic synth nesciunt you 
  probably haven't heard of labore sustainable VHS.
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Hi so as you can see my collapse two is inside collapse one. And my collapse two width is a lot smaller than my collapse one width. The yellow background is currently only covering the width of collapse two when I open collapse one I want the yellow background to be the same width as collapse one. Thanks in advance. sorry I tried to run snippet but I'm not sure how to add the bootstrap links in snippet. </p>