I’m having a problem overcoming the space created between the nav bar and the div section below it. A negative bottom margin will get it done but isn’t the future proof solution I want. Here’s a screenshot of the page:
Here’s a link to the site:
http://htmlkoala.com/mccabe-electric
Here’s the html:
<div class="section group">
<div class="col span_2_of_2">
<nav class="menu-container">
<div class="inside-container">
<ul class="menu">
<li class="active"><a href="index.html"><i class="fa fa-home fa-lg"></i></a></li>
<li><a href="#services" class="">Services</a></li>
<li><a href="#contact" class="">Contact</a></li>
</ul>
</div><!-- .inside-container -->
</nav><!-- .menu-container -->
</div><!-- .col .span_2_of_2 -->
</div><!-- .section .group -->
<div class="slideshow">
<div class="section group inside-container">
<div class="col2 span_3_of_4">
<!-- Start WOWSlider.com BODY section --> <!-- add to the <body> of your page -->
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li><img src="data1/images/commercialelectricalwiring.jpg" alt="industrial" title="industrial" id="wows1_0"/>
</li>
<li><img src="data1/images/electricaljob.jpg" alt="commercial" title="commercial" id="wows1_1"/>
</li>
<li><a href="http://wowslider.com"><img src="data1/images/lightingupgradeelectrician.jpg" alt="lighting upgrades" title="lighting upgrades" id="wows1_2"/></a>
</li>
<li><img src="data1/images/patbox.jpg" alt="residential/new construction" title="residential/new construction" id="wows1_3"/>
</li>
</ul>
</div><!-- .ws_images -->
<div class="ws_shadow"></div>
</div><!-- #wowslider-container1 .slider-pos -->
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
<div class="col2 span_1_of_4 intro">
<h2>Honesty Commitment and Experience</h2>
<p>Use my 40+ years of expertise to create custom solutions to fit your needs and budget
</p>
</div><!--.col .span_1_of_4-->
</div><!--.section .group .slide-container-->
</div><!--.slideshow-->
Here’s the CSS:
* SECTIONS ============================================================================= */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* GROUPING ============================================================================= */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
.menu-container {
background: #e54c10 none repeat scroll 0 0;
border-top: 1px solid #c14e20;
margin-bottom: -80px;
}
ul.menu {
list-style-type: none;
margin: 0;
padding: 0;
background: #e54c10 none repeat scroll 0 0;
}
ul.menu li {
float: left;
border-right: 1px solid #537248;
font-family: 'Roboto', sans-serif;
font-weight: 700;
color: #413f53;
text-transform: uppercase;
}
.menu li:first-child {
border-left:1px solid #537248;
}
.menu li a {
display: inline-block;
color: #413f33;
padding: 0.875em 1em;
text-decoration: none;
}
.menu li a:hover:not(.active) {
background: #413f33;
color: rgba(255, 255, 255, 0.7);
}
.menu li a:focus {
background: #413f33;
color: rgba(255, 255, 255, 0.7);
}
.active {
background: #413f33;
}
.menu li i {
color: #B0C2AA;
}
.slideshow {
background: #3D3B2F none repeat scroll 0 0;
position: relative;
top: 30px;
}
.intro {
float: right;
}
.intro h2 {
color: rgba(255, 255, 255, 0.7);
font-size: 2em;
text-transform: uppercase;
padding-top: 30px;
line-height: 38px;
letter-spacing: 1px;
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
.intro p {
color: rgba(255, 255, 255, 0.7);
font-size: 0.875em;
margin-top: 20px;
width: 100%;
line-height: 23px;
letter-spacing: 1px;
text-transform: uppercase;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}