화면 크기를 줄이면 CSS 테두리 그림자가 나타납니다.

Question

웹 사이트의 머리글을 만듭니다. 정상적인 전체 브라우저 너비로 웹 사이트를 만들면 this처럼 머리글이 나타납니다. 그러나 화면 크기를 너비의 절반으로 줄이면 http://i.imgur.com/w1P14QI.png (나타나는 검은 색 막대)가 나타납니다. 나는 dropshadow가 어디에서 왔는지 추적하기 위해 inspect 요소를 사용하여 시도했지만 문제가 어디 있는지 전혀 알지 못합니다.

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