title: image not full width in a col-md-4 div
body: <p>i am trying to make an image full width in col-md-4 div. I've tried using the img-responsive class as well as width:100% but still it is not working. below is my html code and css  </p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 travelinfo"&gt;
  
    &lt;h3&gt;travel info&lt;/h3&gt;
    &lt;div class="col-md-4 smallImg"&gt;
      &lt;img src="img/pokhara.jpeg" class="img-responsive"&gt;
    &lt;/div&gt;
    &lt;div class="col-md-8 NewsInfo"&gt;
      &lt;a href=""&gt;The six best trekking routes &lt;/a&gt;
      &lt;p&gt; March 22,2012&lt;/p&gt;
    &lt;/div&gt;&lt;div class="clear-fix"&gt;&lt;/div&gt;&lt;br&gt;
  
  
  
    &lt;div class="col-md-4 smallImg"&gt;
      &lt;img src="img/illam.jpeg" class="img-responsive"&gt;
    &lt;/div&gt;
    &lt;div class="col-md-8 NewsInfo"&gt;
      &lt;a href=""&gt;amazing places &lt;/a&gt;
      &lt;p&gt;may 30,2011&lt;/p&gt;
    &lt;/div&gt;&lt;div class="clear-fix"&gt;&lt;/div&gt;&lt;br&gt;
  
  
    &lt;div class="col-md-4 smallImg"&gt;
      &lt;img src="img/langtang.jpeg" class="img-responsive"&gt;
    &lt;/div&gt;
    &lt;div class="col-md-8 NewsInfo"&gt;
      &lt;a href=""&gt;amazing langtang and gosaikund&lt;/a&gt;
      &lt;p&gt;april 2015&lt;/p&gt;
    &lt;/div&gt;&lt;div class="clear-fix"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>.travelinfo .smallImg img{margin-top:25px;float: left;max-width: 100%;vertical-align: middle;}
  .NewsInfo{float: right;line-height: 15px;margin-top: 20px;}
  
  .NewsInfo a{font-family: 'Open Sans', sans-serif; font-size: 13px;color:#fff; text-transform:uppercase;font-weight: 400;}
  .NewsInfo p{font-family: 'Open Sans', sans-serif; font-size: 13px;color:#ff590b; text-transform:uppercase;}
  </code></pre>