Upon running this HTML file in my browser, I noticed that there is an 18px gap at the top of the first div. It's strange because this issue only occurs when I run the HTML locally on my browser, but everything works fine on JSFiddle. I'm puzzled as to why this discrepancy exists.
CSS code:
/* CSS Document */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#slide-1 .bcg {
background-image:url('http://wanderingdanny.com/oxford/images/p/b4242667-wytham-woods-avenue.jpg');
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 750px;
width: 100%;
position:relative;
}
#slide-1 .hsContainer {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
overflow: hidden;
position: fixed;
-webkit-transform: translateZ(0)
}
And so on... (omitted for brevity)
<section id="slide-1" class="homeSlide">
<div class="bcg">
<div class="hsContainer">
<div id ="bill" class="hsContent">
<h2 id="title">
ABHISHEK SAHA
</h2>
<div id="menu">
<ul>
<li class="entry">Resume</li>
<li>•</li>
<li class="entry"><a href="https://github.com/AbhishekSaha">Github</a></li>
<li>•</li>
<li class="entry">Android Application</li>
</ul>
</div>
</div>
</div>
</div>
</section>