当我缩小屏幕尺寸时，会出现CSS边框阴影

Question

我正在为网站创建标题。当我在正常的浏览器宽度上显示网站时，标题就会按照它的设置显示，例如this。但是，只要我将屏幕尺寸缩小为宽度的一半，就会弹出：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; 
}