Background showing between divs - html

Question

There is background colour showing between image divs. I thought it might have something to do with margins. Even setting the div to absolute positioning and the parent to relative doesn't work. The picture still won't show without it being relative. (robot2.jpg in div sec, sectThree).
Here's the website: 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;
}
/*
nav {
position: fixed;
width: 100%;
height: 50px;
background-color: rgba(0,0,0,.5);
z-index: 99;
text-align: center;
}
nav a {
text-decoration: none;
color: #fff;
margin-left: 30px;
line-height: 50px;
}*/
.sect {
position: rela;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.subSection {
height: 30%;
}
.smallsubSection {
height: 20%;
}
.sectOne {
background-image: url("/Images/CX750Msmall.jpg");
background-attachment: fixed;
}
.sectTwo {
background-image: url("/Images/drone.jpg");
position: relative;
top: -90px;
z-index: -1
}
.sectThree {
background-image: url("/Images/robot2.jpg");
position: absolute;
top: -150px;
background-repeat: space;
}
#aboutSection {
background: #648880;
background: linear-gradient(to right, #f6f1d3, #648880 85%, #293f50);
}
#gearSection {
background: #0083FF;
background: linear-gradient(#3943DA, #00F3FF);
height: 66%;
}
#contactSection {
background: #648880;
background: linear-gradient(#DEDEDE, #898989 85%);
}
.smallsubSection {
font-family: "Arial Narrow", Arial, sans-serif;
font-size: 24px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
}
#bigname {
font-family: "Luckiest Guy";
font-size: 45px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
letter-spacing: 2px;
text-decoration: overline underline;
color: #D5D5D5;
text-align: center;
position: absolute;
top: 33%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
/* MENU START */
nav.container {
margin: 0 auto;
padding: 30px 3em;
background-color: #000040;
position: fixed;
width: 40%;
text-align: center;
list-style: none;
margin-left: 27.5%;
z-index: 1;
}
nav.container a {
color: #fff;
text-decoration: none;
margin: 0 10px;
padding: 10px 10px;
position: relative;
z-index: 0;
cursor: pointer;
font-family: "Rockwell Extra Bold", "Rockwell Bold", monospace;
font-size: 25px;
padding: 10px;
}
nav.borderXwidth a:before,
nav.borderXwidth a:after {
position: absolute;
opacity: 0;
width: 0%;
height: 2px;
content: '';
background: #FFF;
transition: all 0.3s;
}
nav.borderXwidth a:before {
left: 0px;
top: 0px;
}
nav.borderXwidth a:after {
right: 0px;
bottom: 0px;
}
nav.borderXwidth a:hover:before,
nav.borderXwidth a:hover:after {
opacity: 1;
width: 100%;
}
/* MENU END */
.button {
background-color: #4CAF50;
/* Green */
border: none;
color: white;
padding: 13px 21px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 24px;
margin: 4px 2px;
cursor: pointer;
transition-duration: 0.4s;
position: relative;
bottom: -90px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
width: 150px;
}
.button1 {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
/* SCROLLING TEXT MAIN SECTION */
.content {
position: absolute;
top: 144%;
left: 54%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 35px;
line-height: 40px;
font-family: 'Lato', sans-serif;
color: #ecf0f1;
height: 160px;
overflow: hidden;
zoom: 3.5;
-moz-transform: scale(3.5);
}
.visible {
font-weight: 600;
overflow: hidden;
height: 40px;
padding: 0 40px;
}
.visible:before {
content: '';
left: 0;
line-height: 40px;
}
.visible:after {
content: '';
position: absolute;
right: -80px;
line-height: 40px;
}
.visible:after,
.visible:before {
position: absolute;
top: 0;
color: #16a085;
font-size: 42px;
-webkit-animation-name: opacity;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: opacity;
animation-name: opacity;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
p {
display: inline;
float: left;
margin: 0;
left: 40px;
}
ul {
margin-top: 0;
padding-left: 230px;
text-align: left;
list-style: none;
-webkit-animation-name: change;
-webkit-animation-duration: 6s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: change;
animation-name: change;
-webkit-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
ul li {
line-height: 40px;
margin: 0;
}
li {
width: 270px
}
#-webkit-keyframes opacity {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
#-webkit-keyframes change {
0%,
12%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
17%,
29% {
-webkit-transform: translateY(-25%);
transform: translateY(-25%);
}
34%,
46% {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
51%,
63% {
-webkit-transform: translateY(-75%);
transform: translateY(-75%);
}
68%,
80% {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
85%,
97% {
-webkit-transform: translateY(-25%);
transform: translateY(-25%);
}
}
#keyframes opacity {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
#keyframes change {
0%,
12%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
17%,
29% {
-webkit-transform: translateY(-25%);
transform: translateY(-25%);
}
34%,
46% {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
51%,
63% {
-webkit-transform: translateY(-75%);
transform: translateY(-75%);
}
68%,
80% {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
85%,
97% {
-webkit-transform: translateY(-25%);
transform: translateY(-25%);
}
}
<body>
<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>
<div id="homeSection" class="sect
sectOne">
<div id="bigname">
<h1>
THOMAS OGBOURNE
</h1>
<button class="button button2 hvr-icon-hang hvr-fade">Begin</button>
</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>

Answer 1

Is this what you wanted? :
https://jsfiddle.net/n3h3cm1x/
Basically your code is very messy and chaotic. there is something like this in there:
<button class="button button2 hvr-icon-hang hvr-fade">Begin</button>
</div>
</div>`
<div id="aboutSection" class="subSection">
<div class='content'>
Notice that ` symbol? that was the cause of the first break between divs.
the second break between divs is
top:-90px;
which you added to few sections at the bottom.