こんにちは。楽天GOLDにPCスマホ共用のトップページをつくっています。
https://www.rakuten.ne.jp/gold/off-price/
スライダー部分に、owl-carouselというJsでスライダーを設置しました。
*******************************************
<!-- Hero section -->
<section class="hero-section" >
<div class="hero-slider owl-carousel">
<div class="hs-item set-bg" data-setbg="img_hero/bg-1.jpg">
<div class="container">
<div class="row">
<div class="col-xl-6 col-lg-7 text-white">
<span>Hero Brand</span>
<h2>Kate Spade</h2>
<p>ほんの少しの勇気で世界は変わる！<br>
日常生活をカラフルに彩り、明るく華やかな愛らしさで、「ファッションの喜び」というエッセンスを貴女の毎日に...</p>
<a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/" class="site-btn sb-line">DISCOVER</a>
</div>
</div>
以下略
*******************************************
スライダーの画像は横が1920pxです。

PC表示では、ブラウザの横幅に応じて、可変します。
一方、スマホで見たときに、横がはみ出します。
画像のサイズを小さくしてみましたが、引き伸ばされて表示され、画質が悪くなるだけででした。
また、CSSの
hero-sectionにmax-width="**px"で、最大幅を入れてみましたが効かないようです。

スマホで商品ページを見たときの様に、横のサイズをスマホあうようにするには、どこを直せばよいでしょうか？

WEB制作は、初心者です。

宜しくお願い致します。