当我减小屏幕尺寸时，CSS边框会出现

Question

我正在为网站创建标题。当我的网站在我的正常浏览器宽度上时，标题会像this一样出现。但是，只要我将屏幕尺寸缩小到宽度的一半，就会弹出：http://i.imgur.com/w1P14QI.png（出现的黑条）。我已经尝试使用inspect元素来追踪Drophadow的来源，但我不知道问题出在哪里。

CSS代码：

div#header {
        background:#41038e;
        min-width: 100%;
        height: 175px;
        margin: 0;
        padding: 0;
        z-index: 1;
        box-shadow: 0px 5px 5px -5px #666;
}
div#white-background {
        min-width: 100%;
        height: 125px;
        background:#FFF;
        padding: 0;
        z-index: -1;
}
div#header-inner {      
        width: 1200px;
        height: 200px;
        margin: 0 auto;
        padding: 0;
        z-index: 1;
 }
 div#logo {
        height: 100px;
        padding-top: 25px;
        margin: 0 auto;
        width: 1200px;
  }

HTML：

       <div id="white-background">
                <div id = "logo"><!--begin logo-->
                    <h2>The Cupertino Florist</h2>
                    <!--<img src="img/logo.png" />-->
                </div><!--end logo-->
             </div>  

Answer 1

使用此功能。

div#header {
    background:#41038e;
    min-width: 100%;
    height: 175px;
    margin: 0;
    padding: 0;
    box-shadow: 0 5px 5px -2px #666;
}