如何让我的图片留在他们的div中？

我使用引导程序，我有一个div中包含两个图像和ul列表。在整页时，它们都保留在div内（下面的第一张图片），但是当我调整页面大小时，图像和ul列表会相应移动，但它们不再包含在div内（下面的第二张图片）。有谁知道我可以如何改变这种情况？如何让我的图片留在他们的div中？

HTML：

<div class="more"> 


    <div class="col-sm-3 col-xs-12" id="social-logo"> 
    <a href="#"><img src="" alt="" width="200" height="200"></a> 
    </div> 

    <div class="col-sm-3 col-xs-12" id="links"> 
    <ul class="about"> 
     <li class="a-links"> 
     <div id="about-links" class="site-content"> 
      <ul class="aboutli"> 
      <li><a target="_blank" href="#">About Us</a></li> 
      <li><a target="_blank" href="#">FAQ's</a></li> 
      <li><a target="_blank" href="#">Contact Us</a></li> 
      <li><a target="_blank" href="#">Work With Us</a></li> 
      <li><a target="_blank" href="#">Terms and Conditions</a></li> 
      <li><a target="_blank" href="#">Privacy Policy</a></li> 
      </ul> 
     </div> 
     </li> 
    </ul> 
    </div> 

    <div class="col-sm-3 col-xs-12" id="drinkaware"> 
     <a href="https://drinkaware.co.uk"><img src="/Applications/MAMP/htdocs/D0.1/images/drinkawarered.png" width="200" height="auto"></a> 
    </div> 

    </div> 

</div>

CSS：

.more { 
    height: 300px; 
    background-color: #e6e6e6; 
    border-top: 1px solid #000000; 
} 
#social-logo { 
    display: inline-block; 

} 
ul.about { 
    width: 160px; 
    height: 184px; 
    display: inline-block; 
    border: 1px solid #000000; 
    list-style-type: none !important; 
    list-style-position: inside; 
    text-align: center; 
    text-decoration: none; 
    line-height: 0.8cm; 
    padding: 0px; 
} 
ul.aboutli { 
    color: #000000; 
    font-size: 12px; 
    border: 1px solid yellow; 
    padding: 0px; 
    text-decoration: none; 
    list-style-type: none !important; 
} 
#drinkaware { 
    display: inline-block; 
}

来源

2016-04-12 TDP

话非常便宜，我们展示的代码 – Przemek

无意中按下进入，但它现在是了。 – TDP

这里肯定有一些遗漏的代码，告诉我们整个故事。 –