How can I fix this gap between nav and full screen div? - html

Question

I am trying to figure out this gap in between the nav and the "home" image. Every time I try with any margin-top: -15px the div class="inner" jumps to the far right of the image.
I'm still learning so I'm assuming its something pretty simple that I'm overlooking or have added too much junk code. This is also my 1st post on here so I'm hoping it all comes out correctly.
/**************************
GENERAL
**************************/
body {
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
position: relative;
background-color: #fff;
}
img {
max-width: 100%;
margin: 0;
padding: 0;
border: 0;
}
a {
text-decoration: none;
color: #4E4E4E;
}
h1 {
color: #4E4E4E;
font: normal 50px 'oswald', sans-serif;
margin: 15px 0;
font-size: 1.75em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
color: #4E4E4E;
font-size: 0.75em;
margin: -5px 0 0;
font-weight: normal;
}
h3 {
color: #4E4E4E;
margin: 0 0 1em 0;
color: #384047;
}
#wrapper {
position: relative;
width: 100%;
background: #fff;
}
/**************************
NAVIGATION
**************************/
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* Basic Styles */
nav {
height: 60px;
width: 100%;
background: #fff;
font-size: 13pt;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
position: relative;
padding-top: 10px;
border-bottom: solid 1px #666;
z-index: 999;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 625px;
}
nav li {
display: inline;
float: left;
}
nav a {
color: #4E4E4E;
display: inline-block;
width: 125px;
text-align: center;
text-decoration: none;
line-height: 40px;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
color: #77308f;
}
nav a#pull {
display: none;
}
/**************************
HOME | SLIDES | SPLASH
**************************/
#slides {
max-width: 100%;
height: 1122px;
background: url('http://greytprints.com/images/home_bg.jpg') no-repeat top center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: block;
z-index: -2;
}
#slides .inner {
position: relative;
top: 60%;
text-align: center;
width: 100%;
text-shadow: 0 0 2px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.4);
}
#slides .inner h1 {
color: #fff;
font-weight: 600;
font-size: 60px;
text-transform: uppercase;
letter-spacing: 1px;
}
#slides .inner h2 {
color: #fff;
font-weight: 400;
font-size: 40px;
text-transform: uppercase;
letter-spacing: 1px;
}
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 2000px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
<nav class="clearfix">
<ul class="clearfix">
<li>Newsletter</li>
<li>Store</li>
<li id="hide_logo"><img src="images/gp_logo_color.png" width="55" height="55"></li>
<li>About Us</li>
<li>Connect</li>
</ul>
Menu
</nav>
<div id="wrapper">
<div id="slides" name="home">
<div class="inner">
<h1>WE ARE GREYT PRINTS</h1>
<br>
<span><h2>AND WE LOVE GREYHOUNDS</h2></span>
</div>
</div>
</div>

Answer 1

The problem is margin collapse, because inside #wrapper there is a <h1> with some margin-top.
In this case, you can fix it using absolute positioning instead of relative one. This way .inner (including <h1>) will be removed from the normal flow of the document, so the margin won't affect #wrapper.
#slides .inner {
position: absolute;
}
/**************************
GENERAL
**************************/
body {
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
position: relative;
background-color: #fff;
}
img {
max-width: 100%;
margin: 0;
padding: 0;
border: 0;
}
a {
text-decoration: none;
color: #4E4E4E;
}
h1 {
color: #4E4E4E;
font: normal 50px 'oswald', sans-serif;
margin: 15px 0;
font-size: 1.75em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
color: #4E4E4E;
font-size: 0.75em;
margin: -5px 0 0;
font-weight: normal;
}
h3 {
color: #4E4E4E;
margin: 0 0 1em 0;
color: #384047;
}
#wrapper {
position: relative;
width: 100%;
background: #fff;
}
/**************************
NAVIGATION
**************************/
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* Basic Styles */
nav {
height: 60px;
width: 100%;
background: #fff;
font-size: 13pt;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
position: relative;
padding-top: 10px;
border-bottom: solid 1px #666;
z-index: 999;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 625px;
}
nav li {
display: inline;
float: left;
}
nav a {
color: #4E4E4E;
display: inline-block;
width: 125px;
text-align: center;
text-decoration: none;
line-height: 40px;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
color: #77308f;
}
nav a#pull {
display: none;
}
/**************************
HOME | SLIDES | SPLASH
**************************/
#slides {
max-width: 100%;
height: 1122px;
background: url('http://greytprints.com/images/home_bg.jpg') no-repeat top center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: block;
z-index: -2;
}
#slides .inner {
position: absolute;
top: 60%;
text-align: center;
width: 100%;
text-shadow: 0 0 2px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.4);
}
#slides .inner h1 {
color: #fff;
font-weight: 600;
font-size: 60px;
text-transform: uppercase;
letter-spacing: 1px;
}
#slides .inner h2 {
color: #fff;
font-weight: 400;
font-size: 40px;
text-transform: uppercase;
letter-spacing: 1px;
}
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 2000px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
<nav class="clearfix">
<ul class="clearfix">
<li>Newsletter</li>
<li>Store</li>
<li id="hide_logo"><img src="images/gp_logo_color.png" width="55" height="55"></li>
<li>About Us</li>
<li>Connect</li>
</ul>
Menu
</nav>
<div id="wrapper">
<div id="slides" name="home">
<div class="inner">
<h1>WE ARE GREYT PRINTS</h1>
<br>
<span><h2>AND WE LOVE GREYHOUNDS</h2></span>
</div>
</div>
</div>