Header not level with nav links - html

Question

I have moved my icon-header from below the mainHeader to above it. It was fine before, but I like it the icon-header above the mainHeader, but the links in my nav are below my mainHeader. I have attempted to use padding, margin and just top, but it stays put. Here is my JSFiddle. My JSFiddle is slightly different to my actual HTML and CSS, as I have all my files in a folder in my home directory. Here is my HTML and CSS:
HTML
<!--HEADER OF WEBSITE-->
<!--Icon Header-->
<div class="bottomHeader">
<div id="icon-navwrap">
<ul id="icon-nav">
<li id="fb"><img src="Header/facebook.png" width="30px" height="30px"/></li>
<li><div id="mini-divider"></div></li>
<li id="yt"><img src="Header/youtube.png" width="30px" height="30px"/></li>
<li><div id="mini-divider"></div></li>
<li id="tt"><img src="Header/twitter.png" width="30px" height="30px"/></li>
<li><div id="mini-divider"></div></li>
</ul>
</div>
</div>
<!--End of Icon Header-->
<!--Main Header-->
<div class="mH-clearfix">
<!--Main Header Logo-->
<div id="mainHeader">
<div id="header_logo">
<div id="logo"><img src="Header/banner.png" alt="Logo" width="300"height="100">
</div>
<!--End of Logo-->
<!--Main Header Links-->
<div id="nav-wrap">
<ul id="nav">
<li>Roster</li>
<li>Gallery</li>
<li>Sponsors</li>
<li>About Us</li>
</ul>
</div>
<!--End of Main Header Links-->
</div>
</div>
</div>
<!--End of Main Header-->
</div>
CSS
/*=================
======= Body ======
=================*/
* {
margin: 0; padding: 0;
}
body {
font-family: "Montserrat";
font-size: 115%;
background-image: url(background.png)
}
/*=======================
====== Header Logo ======
=======================*/
#mainHeader {
background-color: #02236a;
}
.mH-clearfix {
height: auto;
width: 100%;
content: "";
clear: both;
}
#nav {
margin-left: 25%;
}
/*==========================
======= Icon Header ========
==========================*/
.bottomHeader {
background: #000b22;
width: 100%;
height: 30px;
margin: 0 auto;
position: absolute;
margin: 0;
overflow: hidden;
}
#icon-nav li {
float: left;
background-size: 50%;
transition: background-color 0.5s ease;
}
#mini-divider {
position: absolute;
top: 1%;
bottom: 1%;
border-left: 1px solid white;
}
#fb:hover {
background-color: #3f5c9a;
}
#yt:hover {
background-color: #bd2826;
}
#tt:hover {
background-color: #3f8dcb;
}
/*===============
====== Nav ======
===============*/
#nav {
list-style: none;
}
#nav a {
position: relative;
color: #fff;
text-decoration: none;
}
#nav li {
float: left;
margin-left: 50px;
border-radius: 5px;
line-height: 100px;
}
#nav a:hover {
color: #fff;
}
#nav a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #fff;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: akk 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s
}
#nav a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/*============================
======= Miscellaneous ========
============================*/
a {
text-decoration: none;
}
li {
list-style: none;
}

Answer 1

Okay to fix your styling issues:
Add margin-top: 30px; and display: inline-block; to #logo
Add display: inline-block; to #nav-wrap
Remove margin-left: 25%; from #nav
This should fix the header.