I am working on this webpage, and so far I've spent most of my time just perfecting animations, so there isn't really any content yet, just a few divs. The problem I'm having, as you can see in the pic, is that the "row" div containing the phrase Hello World! somehow falls right on top of the "row" containing the gray and orange blank divs. For the life of me I cannot figure out why. The only thing I can think of is maybe there's a problem with the links to bootstrap and such? All code and screen shots are below. Thanks in advance for your help.
As a side question, and rather unimportant right now, can anyone tell me why there is a small white gap above the navbar?
Link to screenshot of top 1/3rd of page and browser
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Timothy Sutterby">
<!-- <meta HTTP-EQUIV="refresh" CONTENT="10"> -->
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags -->
<title>T G Sutterby</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/880f652677.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="CSS/TGSstyles.css">
</head>
<body>
<!-- Modals -->
<!-- End Modals -->
<!-- Nav Bar -->
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-brand" id="navbar-brand" href="#"><span id="brand- span">Brand</span></a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li><a href="#">Left</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">L Down <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">D Right <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li><a href="#contact">Right</a></li>
</ul>
</div>
</nav>
<!-- End Nav Bar -->
<!-- Body Elements -->
<div class="container-fluid">
<!-- Animated/Expanding Div -->
<div class="row outeranimDiv-TGS" id="outeranimDiv">
<div class="leftanimDiv col-lg-5" id="animDiv2"></div>
<div class="animDiv-TGS col-lg-2" id="animDiv1"></div>
<div class="rightanimDiv col-lg-5" id="animDiv3"></div>
</div>
<!-- End Animated/Expanding Div -->
<!-- Actual Body -->
<div class="row bodyTGS">
Hello World!
</div>
<!-- End Actual Body -->
</div>
<!-- End Body Elements -->
<!-- Scripts -->
<script>
$(document).ready(function() {
$("#animDiv1").animate({
height: "400px"
}, 500);
$("#animDiv2, #animDiv3").delay(501).animate({
backgroundColor: "gray"
}, 500);
});
</script>
<!-- End Scripts -->
</body>
And CSS:
body {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #333;
font-size: 12px;
background-color: black;
height: 100vh;
width: 100vw;
padding: 0;
}
.bodyTGS {
}
.outeranimDiv-TGS {
z-index: -1;
position: absolute;
top: 0px;
width: 100%;
text-align: center;
height: 400px;
}
.animDiv-TGS {
position: relative;
margin: 0 auto;
height: 2px;
width: 20%;
background-color: #ff9900;
}
.leftanimDiv {
position: relative;
margin: 0 auto;
background-color: black;
width: 40%;
height: 400px;
z-index: -1;
}
.rightanimDiv {
position: relative;
margin: 0 auto;
background-color: black;
width: 40%;
height: 400px;
z-index: -1;
}
.navbar-brand {
position: absolute;
font-size: 35px;
width: 100%;
left: 0;
text-align: center;
margin: 0 auto;
}
.navbar-toggle {
z-index: 3;
}
.navbar-right {
margin-right: 2px;
}
