html - 我的 div 重叠。我希望他们肩并肩，但也有反应

Question

.center {
    text-align: center;
}

.box1 {
  display: inline-block;
  width: 30%;
  margin-left:10%;
  clear: both;
  height: 30%
}

#img1 {
    padding: 5%
}

<div class="center">
    <div class="box1">
        <img id="img1" src="http://i.imgur.com/D5T6lY1.png" />
    </div>
    <div class="box1">
        <p style="text-align:left">Choosing a new Point of Sale (POS) is an opportunity. Lavu is not just accepting payments - Lavu is business management on the iPad. Upgrade your business with the Cloud POS system that was developed specifically for the restaurant / hospitality industry. Lavu has the tools you need to improve efficiency and the bottom line. Love your business.</p>
        <div class="rounded-button"> 
            <a href="lavu.com" style="text-decoration: none">live demo<img id="terminal_icon" src="http://i.imgur.com/ZrCANdq.png"/>     </a>
        </div>
    </div>
</div>

• 我正在尝试制作一个包含 2 个其他 div 的 div。
  
• 我希望这 2 个 div 在页面上居中。
  

问题
当我减小页面宽度时，我无法阻止它们重叠。
我希望内部的 2 个 div “清除” 而不是重叠 (也完全响应)。
我似乎无法达到这种效果。

有什么建议吗？

Answer 1

强制 .box1 的 child 尊重他们 parent 的行为

.box1 > * {
  max-width: 100%;
}

.center {
    text-align: center;
}

.box1 {
  display: inline-block;
  width: 30%;
  margin-left:10%;
  clear: both;
  height: 30%
}

.box1 > * {
  max-width: 100%;
}

#img1 {
    padding: 5%
}

<div class="center">
    <div class="box1">
        <img id="img1" src="http://i.imgur.com/D5T6lY1.png" />
    </div>
    <div class="box1">
        <p style="text-align:left">Choosing a new Point of Sale (POS) is an opportunity. Lavu is not just accepting payments - Lavu is business management on the iPad. Upgrade your business with the Cloud POS system that was developed specifically for the restaurant / hospitality industry. Lavu has the tools you need to improve efficiency and the bottom line. Love your business.</p>
        <div class="rounded-button"> 
            <a href="lavu.com" style="text-decoration: none">live demo<img id="terminal_icon" src="http://i.imgur.com/ZrCANdq.png"/>     </a>
        </div>
    </div>
</div>