Wie reagiere ich die Breite der Schaltfläche entsprechend der Breite des Bildes mit CSS

Question

Hier ist, was ich habe currently mit dem Code unten. Ich versuche, dass der Button die Breite des reagierenden Bildes bei der Größenänderung überspannt. Momentan verkleinert es sich bei der Größenanpassung fast um die Hälfte, anstatt mit dem Bild ausgerichtet zu bleiben. Dies kann eine jQuery Frage sein, ich bin mir nicht ganz sicher.

HTML

<div class="container"> 
     <div class="row"> 
      <div class="img-box col-lg-12 text-center"> 
       <button type="button" class="btn btn-lg btn-primary" onclick="window.location='beginReservation.php'">Book Seat Now</button><br> 
       <img class="bg img-responsive img-center" src="images/homepage.jpg" alt="Book Seat"> 
      </div> 
     </div> 
    </div> 

CSS

.img-box { 
    background: white; 
    margin-bottom: 20px; 
    padding: 0px; 
    display:inline-block; 
    } 

    .btn { 
     background: rgb(179,0,14); 
     border: rgb(179,0,14); 
     padding: 0.5% 32.75%; 
     border-radius: 0px; 
     margin:0 auto;  
    } 

    .bg { 
    margin:0 auto; 
    } 

Answer 1

Remove display: inline-block von dieser Klasse .img-box{}