Image not adapting to the width set - image

Question

I have a section on a site that I have multiple image blocks. I have two columns with multiple rows. For some reason the margin and width are not being applied to these images. I have the following code in my media query for a viewport of 640px or less. Whenever you drag the corner of the page, the images do not scale in size at all. Also the left images stay in place instead of moving with the margin.
It is under the part called Site Sponsors in a viewport of 640px or less.
What is causing the images to not scale in height and width as well as the margin?
As you can see I have the images width defined in a percentage basis:
.b_250 img {
width: 55%;
height: auto;
}
.b_250 iframe {
width: 55%;
height: auto;
}
As well as the margin defined:
.sponsors {
width: 100%;
margin: 0 2.5%;
}
Does anyone see what I am doing wrong?
<div id="sponsor-left">
<div class="b_250">
<img src="images/Contractor Images/PMC spray foam equipment for sale.jpg">
</div>
<div class="b_250">
<img src="images/Contractor Images/Green Insulation Technology 300x200.jpg">
</div>
<div class="b_250">
<img src="images/Contractor Images/Spray foam rigs for sale a series.jpg">
</div>
</div>
<div id="sponsor-right">
<div class="b_250">
<img src="images/Ad Boxes/300x200.gif" alt="">
</div>
<div class="b_250">
<img src="images/Ad Boxes/300x200.gif" alt="">
</div>
<div class="b_250">
<img src="images/Ad Boxes/300x200.gif" alt="">
</div>
<div class="b_250">
<img src="images/Ad Boxes/300x200.gif" alt="">
</div>
</div>
.container {
width: 100%;
}
.content {
float: none;
text-align: center;
width: 100%;
}
/*----Second to Last Homepage Article---*/
#latestnews {
width: 100%;
text-align: center;
}
#latestnews .latestnews h2{
margin: 10px 5%;
font-size: 1.3em;
width: 90%;
}
#latestnews ul, #latestnews li{
text-align: center;
}
#latestnews li{
margin: 0 auto;
}
.latestnews img{
margin: 0 auto;
text-align: center;
}
#latestnews div.latestnews{
float:none;
width: 100%;
}
#latestnews p {
padding: 20px 10px;
clear: both;
}
#latestnews p.readmore{margin-top:10px; text-align:center;}
.column .sponsors {
width: 100%;
}
.column {
clear: both;
width: 100%;
margin: 0 auto;
}
.column .sponsors .b_250{
border: none;
}
.b_250 img {
width: 55%;
height: auto;
}
.b_250 iframe {
width: 55%;
height: auto;
}
.sponsors {
width: 100%;
margin: 0 2.5%;
}
.sponsors h2{
margin: 10px 5%;
font-size: 1.3em;
width: 90%;
text-align: center;
}
#sponsor-left {
float: left;
width: 45%;
}
#sponsor-right {
float: right;
width: 45%;
}
}

Answer 1

To center the ads, add this(although I prefer to avoid using ID's in selectors):
#sponsor-left a > img { margin: 0 auto; }
At which point you can then increase the width of the images to 100% to fill the width you declared for the left and right columns.
Also as I noted in the comments remove the float: right; and change to display: inline-block;

Answer 2

try display:block max-width:100%; height:auto;
for image to be center
You must use display:block or display:inline-block by default image is display:inline
How to center?
if your image is display:block use margin-left:auto; and margin-right:auto;
and for display:inline-block give text-align:center to image parent element
Note
Be care full your image css does not have float:left or float:right