响应式DIV的故障使图像无法正确排列

Question

我正在为我们的网站建立一个新的主页。您可以在此处访问：http://www.bkd.com/new-test.htm

我遇到的问题是当我向Div容器添加一些响应代码时，它使我的第二行图像陷入困境。最后2个区块位于第一个广告下方。我需要它们像第一行图像一样排列。

这是我的HTML：

    <div id="container5">
    <div id="container2"><a href="/industries/"><img src="/images/industries-hp.jpg" id="img1" height="243"></a></div>
   <div id="container3"><a href="/services/services.htm"><img src="/images/services-hp.jpg" id="img1" height="243"></a></div>
   <div id="container4"><a href="/thought-center/"><img src="/images/thoughtware-hp.jpg"id="img1" height="243"></a></div>

   </div>

   <div id="container6">
   <div id="container7"><a href="/client-success/"><img src="/images/client-success.jpg" id="img1" height="140"></a></div>
   <div id="container8"><a href="/webinars/2014/10-signs-you-need-an-erp-solution.htm"><img src="/images/10-signs.jpg" id="img1" height="140"></a></div>
   <div id="container9"><a href=""><img src="/images/ad-small.jpg" id="img1" height="140"></a></div>

   </div>

这是我的CSS：

    /* Other page elements */
    /* Show in default resolution screen*/

    #container5 {
    max-width: 970px;
    position: relative;
    margin:0 auto;
    line-height: 1.4em;
    }

    /* If in mobile screen with maximum width 479px. The iPhone screen resolution is     320x480 px (except iPhone4, 640x960) */    
    @media only screen and (max-width: 479px){
    #container5 { width: 90%; }
    }

    #container2 {
    width: 310px;
    float: left;
    padding-top:10px;
    padding-right:12px;
    padding-bottom:5px;

    }

    #container3 {
    width: 310px;
    float: left;
    padding-top:10px;
    padding-right:12px;
    padding-bottom:5px;

    }

    #container4 {
    width: 310px;
    float: left;
    padding-top:10px;
    padding-right:12px;
    padding-bottom:5px;

    }

    #container6 {
    max-width: 970px;
    position: relative;
    margin:0 auto;
    line-height: 1.4em;
    }

    /* If in mobile screen with maximum width 479px. The iPhone screen resolution is 320x480 px (except iPhone4, 640x960) */    
    @media only screen and (max-width: 479px){
   #container6 { width: 90%; }

   #container7 {
   width: 310px;
   float: left;
   padding-top:10px;
   padding-right:12px;
   padding-bottom:5px;

   }

   #container8 {
   width: 310px;
   float: left;
   padding-top:10px;
   padding-right:12px;
   padding-bottom:5px;

   }

   #container9 {
   width: 310px;
   float: left;
   padding-top:10px;
   padding-right:12px;
   padding-bottom:5px;

    }

   #img1 {
   max-width:100% !important;
   max-height:100% !important;
   display:block;
    }