垂直滚动条内容推送过来，创建水平滚动条

Question

因此，这里是我现在有工作的页面：我工作的定位是正确的图像，使其看起来像它的现身右侧的http://home-dev.mpcleague.com/contact

你的屏幕。目前为止看起来不错。

但我注意到，当我插入鼠标时，Safari和/或Mac检测到我有鼠标并显示垂直滚动条。这是正常现象，除了一点点图像（滚动条的宽度）现在显示在屏幕的边缘外，这会创建一个水平滚动条。

与我的形象和它的容器中的HTML/CSS如下：

<div class="col-md-6 image-col"> 
    <div class="image-container"> 
      <img class="contact-graphic" src="/assets/contact-us-graphic.png" /> 
    </div> 

</div> 

.image-container { 
    height:70vh; 
} 
img.contact-graphic { 
    height:100%; 
    border-radius:5px; 
} 
.image-col { 
    padding-right:0 !important; 
    padding-left:0; 
    margin-right:0 !important; 
    overflow-x:hidden !important; 
    width:50vw !important; 
    margin-right:-50vw!important; 
    display:inline-block; 
} 

在一个旁注，我的感觉这个CSS可能不是最好的。如果您有任何建议，我很乐意提供帮助。

谢谢！

Answer 1

从.image-col中删除width: 50vw!important;！它是自举网格的一部分。