窗口大小减小时图像重叠

Question

感谢您对我之前提问的所有帮助！但是，我注意到一个小问题 - 它不是太重要，我只是想知道是否有办法解决它。随着浏览器窗口变小，图像开始重叠。我希望这些图像在距离彼此5px时停止。

有人可以查看我的代码并确保我的HTML / CSS没有出错吗？

HTML就是这样：

<div class="content">
    <div class="listingThumbLine">
        <div class="modelListing left">
            <a href="modelOne.html">
                <img src="modelOne.jpg" alt="Model One" class="modelThumb" id="modelOneThumb">
            </a>
            <br />
            <span class="productThumbName"><a href="modelOne.html" class="noBold">Model Name</a></span>
        </div>
        <div class="modelListing right">
            <a href="modelTwo.html">
                <img src="modelTwo.jpg" alt="Model Two" class="modelThumb" id="modelTwoThumb">
            </a>
            <br />
            <span class="productThumbName"><a href="modelTwo.html" class="noBold">Model Name</a></span>
        </div>
        <div class="modelListing center">
            <a href="modelThree.html">
                <img src="modelThree.jpg" alt="Model Three" class="modelThumb" id="modelThreeThumb">
            </a>
            <br />
            <span class="productThumbName"><a href="modelThree.html" class="noBold">Model Name</a></span>
        </div>
    </div>
</div>

CSS就是这样：

body{
background-image:url('bg.jpg'); 
background-repeat:repeat-x;
font-family: Arial; 
color:#B5B5B5;
text-align:center;
}
.content{
font-size:1.25em; 
margin:10px 100px;
}
img.modelThumb{
width:225px;
height:225px;
}
.left{
float:left;
position:relative;
}
.right{
float:left;
position:relative;
}
.center{
float:left;
margin: 0 auto;
}
.modelListing{
width: 33%;
text-align: center;
}