Unwanted padding left margin of images using CSS wrapper
<p>I have unwanted padding on the left of images (see code below).  I have tried changing, deleting or substituting every line of code in the CSS .wrapper-shadow -- no luck.  This error appears in Firefox, Chrome and Explorer.  Interestingly, I have very similar code for tablet and mobile pages for the same site which do not have the error.  I tried substituting the tablet CSS and HTML for the desktop code and the error showed up anyway.   <a href="http://i.stack.imgur.com/0iQwL.jpg" rel="nofollow">See attached image of the problem</a>.</p>

<p>Also interesting:  The tablet and mobile sites (which display correctly) have narrower left margins than the desktop site. <a href="http://i.stack.imgur.com/gnQbg.jpg" rel="nofollow">See attached image of margin difference</a>. I searched through every line of my custom bootstrap CSS to see if I could find a difference between the desktop and tablet style sheets -- again, no luck.  Any help will be greatly appreciated.  Thanks.
Zaffer</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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; 
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container-fluid"&gt;
  &lt;div class="pageHeaderText"&gt;Virtual performance art made with Unity3D game creation software&lt;/div&gt;
  &lt;div class="row"&gt;
   &lt;div class="col-sm-6"&gt;
       &lt;div class="wrapper_shadow center-block"&gt;
         &lt;img src="images/ColorCubed_765.jpg" class="img-responsive center-block" alt="ColorCubed"/&gt;
      &lt;/div&gt;</code></pre>
</div>
</div>
</p>