当屏幕尺寸变小时，防止两个容器破裂？

Question

当我试图缩小屏幕尺寸时，例如移动屏幕，容器会破坏它们之间的空白区域。

附加屏幕显示屏幕尺寸变小时会发生什么。 The containers break as the screen size reduces

＆＃13;

＆＃13;

 #container{
        background-color:#BB1919;
        width:100%;
        height:100px;
    }
    #manu bar{
        width: 1000px;
        margin: auto;
        padding: 0px;
    }
    h1{
        margin: 5px 10px 0 0;
        float: left;
        color:white;
        font-size: 40px;
        padding: 5px;
        font-weight: normal;
        position: relative;
    }
    #clear{
        clear:both;
    }
    #container-2{
        background-color:#990000;
       width:100%;
    }
    #manu-bar-2{
        width:1000px;
        margin:auto;
        height:50px; 
    }
    #manu-bar-2 a{
        font-size: 20px;
        color: white;
        text-decoration: none;
        padding:0 10px;
        margin-top:10px; 
        margin-bottom: -10px;
        border-right: 1px #BB5454 solid;
    }
    #manu-bar-2 a:hover{
        text-decoration: underline;
        color:blue;

＆＃13;

<div id="container">
    <dive id="manu bar">
      <h1>NEWS</h1>
    </div>
<div id="clear"></div>
    <div id="container-2">
        <div id="manu-bar-2">
          <a href="home">Home</a>  
          <a href="Video">Video</a> 
          <a href="world">World</a> 
          <a href="US & Canada">US & Canada</a> 
          <a href="UK">UK</a> 
          <a href="Tech">Tech</a> 
          <a href="stories">Stories</a>
          <a href="Movie & games">Movies & Games</a> 
          <a href="More">More</a> 
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;