There seems to be a background color visible between the image divs. I initially suspected it could be related to margins. Even after attempting to set the div to absolute positioning and the parent to relative, the problem persists. The picture still fails to display without being relative. (Image robot2.jpg in divs sec and sectThree).
Check out the website here: thomasogbourne.me
html,
body {
margin: 0px;
height: 100%;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
background-color: #000000;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin-bottom: 20px;
}
/* Styles for various sections and elements */
<body>
<!-- Navigation bar -->
<nav class="container borderXwidth">
<a id="home" href="#homeSection">HOME</a>
<a id="about" href="#aboutSection">ABOUT</a>
<a id="gear" href="#gearSection">MY GEAR</a>
<a id="portfolio" href="#portfolioSection">PORTFOLIO</a>
<a id="contact" href="#contactSection">CONTACT</a>
</nav>
<!-- Sections with corresponding content -->
<div id="homeSection" class="sect sectOne">
<div id="bigname">
<h1>THOMAS OGBOURNE</h1>
<a href="#aboutSection">
<button class="button button2 hvr-icon-hang hvr-fade">Begin</button>
</a>
</div>
</div>
<div id="aboutSection" class="subSection">
<div class='content'>
<div class='visible'>
<p>Hello I'm Tom:</p>
<ul>
<li>Web Developer</li>
<li>Gamer</li>
<li>Student</li>
<li>Computer Guy</li>
</ul>
</div>
</div>
</div>
<div id="serviceSection" class="sect sectTwo"></div>
<div id="gearSection" class="subSection2"></div>
<div id="portfolioSection" class="sect sectThree"></div>
<div id="contactSection" class="smallsubSection">
<h2 style="margin-top:0;">Email: *******************</h2>
<h2>Phone: **************</h2>
</div>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/app.js"></script>
</body>