Currently, I am in the process of designing a header for a website. Everything seems to be going smoothly when viewed on my regular, full browser width, displaying exactly as intended, similar to this. However, upon resizing the screen to half its width, an unexpected issue arises: a black bar appears, visible at https://i.sstatic.net/69g6G.png. Despite my attempts to use inspect element and identify the source of this problem, locating the root cause of the dropshadow effect has proven to be quite challenging.
Below is the accompanying CSS code:
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;
}
The corresponding HTML snippet can be found below:
<div id="white-background">
<div id = "logo"><!--begin logo-->
<h2>The Cupertino Florist</h2>
<!--<img src="img/logo.png" />-->
</div><!--end logo-->
</div>