maybe a dumb question but im bugging over here for this little problem.This is the image of the problem.As you can see, the background color for some reason only covers half of the text, i want it to be covering the whole text.

This is the code i’m working with:
HTML

<div class="details-more-container">
  <div class="product-details">
     <h1>Exoskeleton</h1>
       <div class="price-size-wrapper">
         <p class="price">99.99€</p>
          <p class="description">Customized Dickies Jacket</p>
</div>
                <p class="size">Size: (Man’s): Large</p>

                <button class="add-to-cart">ADD TO CART</button>
            </div>

CSS

.add-to-cart {
    font-family: Arial, sans-serif;
    font-size: 16px; 
    white-space: nowrap;
    text-align: center; 
    width: fit-content;      
}

Any help would be appreciated.