At the moment, I have a header division with two sub-divisions called header-top and header-bottom. I am attempting to position my logo in the top-header section and align it both vertically and horizontally. The logo is aligning correctly horizontally, but vertically, it seems to be pushing down based on the body, causing the header to drop by 20px. Below is the code snippet.
HTML:
<body>
<div id="big-wrapper">
<div id="header">
<div id="header-top">
<img src="img/main-logo.png" />
</div>
<div id="header-bottom">
</div>
</div>
</div>
</body>
CSS:
#header {
width: 100%;
height: 160px;
box-shadow: 0 1px 4px 1px rgba(237, 237, 237, 1);
}
#header-top {
height: 130px;
border-bottom: 1px solid rgba(200, 200, 200, 0.7);
background-color: rgba(255, 255, 255, 1);
}
#header-top img {
height: 90px;
width: 255px;
display: block;
margin: 20px auto;
}
#header-bottom {
height: 30px;
border-bottom: 1px solid rgba(200, 200, 200, 0.7);
background-color: rgba(255, 255, 255, 1);
}
This is the layout I am currently experiencing