I'm attempting to design a horizontal top header featuring a main navigation stacked above a sub-navigation. Both navigations are constructed using <ul> elements with floated <li> items. The sub-navigation mysteriously has excess horizontal space on the left that I can't seem to identify the cause of (refer to the circled red area in the image below):
Check out this fiddle: http://jsfiddle.net/W3qqh/
Inquiries
- What is responsible for the extra space?
- How can I remove this unwanted space?
Please do share any alternative methods to achieve the desired menu if you think there's a better approach than mine.
HTML Structure
<div class="header">
<div class="home-logo"><a href="/">HOME</a></div>
<div class="main-nav">
<ul>
<li><a>Explore</a></li>
<li><a>Earn</a></li>
<li><a class="selected">Merchants</a></li>
</ul>
</div>
<div class="sub-nav">
<ul>
<li><a>Be Secure</a></li>
<li><a>Get Help</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
</div>
CSS Styles
* { box-sizing: border-box; }
.header { height:99px; width: 100%; position:fixed;}
.header.glass {opacity: 0.8; filter: alpha(opacity=80);}
.home-logo { background: pink; height:99px; width: 239px; position: fixed; }
.main-nav { color: white; position: relative; left:239px; background: #25c0df; height: 66px; line-height:66px; padding: 2px; width: 100%; text-transform: uppercase; font-size: 14px;}
.main-nav ul { height: 0; padding: 0; margin: 0; list-style-type: none; }
.main-nav li { float:left; margin-left: 40px;}
.main-nav li a.selected { border-top: 2px solid white; }
.main-nav li a:hover { border-top: 2px solid white; }
.sub-nav { font-size: 12px; color: #4ebeb2; background: #26b; height: 33px; line-height: 33px; width: 100%; text-transform:uppercase; }
.sub-nav ul { height: 0; padding: 0; margin: 0; list-style-type: none; }
.sub-nav li { float:left; margin-left: 40px;}