html - 当我减小屏幕尺寸时出现 CSS 边框阴影

Question

我正在为网站创建标题。当我的网站以正常的全浏览器宽度显示时，标题会按预期显示，如下所示。但是，一旦我将屏幕尺寸减小到宽度的一半，就会弹出：http: //i.imgur.com/w1P14QI.png（出现的黑条）。我尝试使用检查元素来跟踪阴影的来源，但我不知道问题出在哪里。

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;
}