當我縮小屏幕尺寸時，會出現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; 
}