title: How to remove the white space on right side of an image in a Bootstrap modal?
body: <p>I'm using <strong>Bootstrap v3.3.0</strong> for my website.</p>
  
  <p>I'm showing an image into a bootstrap modal. But I'm getting extra white space on the right side of an image into a bootstrap modal dialog. I tried several CSS tricks by setting width to auto/fix size, setting left and right margin to auto, etc. but couldn't succeed so asking for help.</p>
  
  <p>Following is my bootstrap modal code.</p>
  
  <pre><code>&lt;div id="myModal1" class="modal fade in" aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" style="display: block;"&gt;
    &lt;div class="modal-backdrop fade in"&gt;&lt;/div&gt;
    &lt;div class="modal-dialog" style="margin-top: -20.5px;"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button class="close" data-dismiss="modal" type="button"&gt;
            &lt;span aria-hidden="true"&gt;×&lt;/span&gt;
            &lt;span class="sr-only"&gt;Close&lt;/span&gt;
          &lt;/button&gt;
          &lt;h4 id="myModalLabel" class="modal-title"&gt;
            Rebate Receipt
          &lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body" style="max-height: 420px; overflow: auto; margin-left:auto; margin-right:auto;"&gt;
          &lt;img class="img-responsive" style="text-align:center;" src="http://55.220.5.82:80/Students/2014_Q4/student_123343445434.png"&gt;&lt;/img&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The screen-shot is attached below :
  <img src="https://i.stack.imgur.com/Pzzpb.png" alt="In the screen shot you can see the white space appearing on right side of an image. I want to remove that white space by using inline css."></p>
  
  <p>Thanks.</p>