css - 使用 CSS 包装器不需要的填充图像的左边距

Question

我在图像左侧有不需要的填充(请参见下面的代码)。我试过更改、删除或替换 CSS .wrapper-shadow 中的每一行代码——没有成功。此错误出现在 Firefox、Chrome 和资源管理器中。有趣的是，对于同一站点的平板电脑和移动页面，我有非常相似的代码，但没有错误。我尝试用平板电脑的 CSS 和 HTML 替换桌面代码，但错误还是出现了。 See attached image of the problem .

同样有趣的是:平板电脑和移动网站(正确显示)的左边距比桌面网站窄。 See attached image of margin difference .我搜索了我的自定义 bootstrap CSS 的每一行，看看我是否能找到桌面和平板电脑样式表之间的区别——再次，没有运气。任何帮助将不胜感激。谢谢。扎弗

.wrapper_shadow{ 
	max-width: 765px;
	background-color: #9ebade;
	border: thin solid #758fa9;
	-webkit-box-shadow: 2px 2px 5px 2px #758fa9;
	box-shadow: 2px 2px 5px 2px #758fa9;
	margin-bottom: 15px;
	padding-left: 0px;	
}

<div class="container-fluid">
  <div class="pageHeaderText">Virtual performance art made with Unity3D game creation software</div>
  <div class="row">
   <div class="col-sm-6">
       <div class="wrapper_shadow center-block">
         <img src="images/ColorCubed_765.jpg" class="img-responsive center-block" alt="ColorCubed"/>
      </div>

Answer 1

我自己找到了答案。有时，对一个问题的思考足以将其发布，几分钟后就会在您的大脑中弹出答案，这真是太好了。

我有一行:“padding-left: 5px;”在我父级 bootstrap.css 的 *{} 样式中，它向下级联并导致我的 styles.css 出错。 (见下面的代码)。该错误仅出现在我网站的桌面版本中，而不出现在具有自己样式表的平板电脑或手机中，这一事实就是线索。我想这个故事的寓意总是要检查你的级联。谢谢。扎弗

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-left: 5px;
}