html - 从宽度中删除水平滚动

Question

我使用此代码的目标是将图像和文本定位在背景之上以创建一种叠加层，我已经在所有尺寸上很好地定位了图像，但我的问题是宽度创建了一个长的水平滚动条。寻找一种在删除滚动条的同时保留我的 css 的方法。

全屏 View

移动 View

如您所见，宽度 (1000px) 以蓝色突出显示。

HTML

 <div class="banner-partner-padding position-relative" style="background-image: url('img/bg-banners/banner-partner.jpg'); background-size: cover;">
     <div class="header-p">
       <div class="row">
         <div class="col-6 div-partner text-center">
           <div class="div-partner-content">
             <img src="../img/uploads/<?php echo($rowMerchant['logosrc']); ?>" class="partner-image">
           </div>
         </div>
         <div class="col-6 my-auto pl-4 d-none d-sm-block">
           <?php  echo '<h3 class="bold-font color-white t-shadow-black d-none d-sm-block">'.$rowMerchant['businessname'].'</h3>'; ?>
         </div>
      </div>
     </div>
   </div>

CSS

.banner-partner-padding {
  padding-top: 250px;
}

.header-p {
  width: 1000px !important;
  position: absolute;
  top: 140px;
  left: 210px;
}

@media (max-width: 900px) {
  .header-p {
    width: 1000px !important;
    position: absolute;
    top: 140px;
    left: 50px;
  }
}


@media (max-width: 576px) {
  .header-p {
    width: 1000px !important;
    position: absolute;
    top: 140px;
    left: 30px;
  }
}

.div-partner {
    max-width: 13%;
    min-width: 13%;
    background: white;
    border-radius: 4px;
    padding: 5px 5px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
    display: flex;
    align-content: center!important;
    align-items: center!important;
}

.div-partner-content {
    display:block;
    margin: auto auto;
    height: 100%;
}

.partner-image {
    width: 100%;
    height: auto;
    display:block;
    margin: auto auto;
}

我尝试过但没有奏效的解决方案:

• 添加溢出隐藏:图像被剪切，滚动条保持不变

   .header-p {
     width: 1000px !important;
     position: absolute;
     top: 140px;
     left: 210px;
     overflow-x: hidden;
   }
  

• 添加 z-index:无变化

   .header-p {
     width: 1000px !important;
     position: absolute;
     top: 140px;
     left: 210px;
     z-index: 1;
   }
  

Answer 1

使用最大宽度:100%

示例:

.header-p{
    max-width: 100%;
}

您还应该从 @media 中删除 position, width & top 属性，因为您已经在上面声明了相同的值