If you add a clear:both to your navigation div it will come down and you should remove the height of your .header to fit the content. so it will just fit the provided image. here is the code:
$(document).ready(function() {
$("#slider").animate({
"left": $(".item:first").position().left + "px",
"width": $(".item:first").width() + "px"
}, 0);
$(".item").hover(function() {
$("#slider").stop();
$("#slider").animate({
"left": $(this).position().left + "px",
"width": $(this).width() + "px"
}, 500);
});
$(".item").on("mouseout", function() {
$("#slider").stop();
$("#slider").animate({
"left": $('#one').position().left + "px",
"width": $('#one').width() + "px"
}, 500);
});
});
body{ /* Applies to the <body> tag */
margin:0px; /* Sets the margin on all sides to 0px */
}
.container{ /* The container class */
width:100%; /* This sets the width */
height:100%; /* This sets the height */
background-color:black; /* Sets the background colour */
}
.header{ /* The header class */
width:100%;
background-color:#323232;
color:white; /* The sets the colour of the font */
}
.body{
width:100%;
height:495px;
background-color:white;
color:black;
}
.footer{
width:100%;
height:50px;
background-color:#323232;
color:white;
}
div{
display: inline-block;
float:left;
}
#one, #two, #three, #four{
background-color:#323232;
height:96px;
color:white;
text-align:center;
font-size:25px;
font-family:"Myriad Pro";
}
#slider{
background-color:#ed1c24;
height:10px;
width:100px;
position: absolute;
left: 0;
bottom:0;
}
.inside{
margin-left:30px;
margin-right:30px;
padding-top:7px;
pointer-events:none;
margin-top:40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"> <!-- This is the container -->
<div class="header"> <!-- This is the header -->
<div style="float:left"> <!-- This is the logo -->
<img src="https://cdn.colorlib.com/wp/wp-content/uploads/sites/2/2014/02/Olympic-logo.png" height="100px">
</div>
<div style="float:right; font-size:24px; font-family:'Myriad Pro';">Above</div>
<div style="float:right; clear:right"> <!-- This is the navigation menu -->
<div style="position:relative"> <!-- This is the container of the navigation menu -->
<div id="slider"></div> <!-- This is the slider bar -->
<a href="index.html"><div id="one" class="item"><div class="inside">Home</div></div></a> <!-- This is just one of the buttons -->
<a href="about.html"><div id="two" class="item"><div class="inside">About Us</div></div></a>
<a href="apps.html"><div id="three" class="item"><div class="inside">Apps</div></div></a>
<a href="contact.html"><div id="four" class="item"><div class="inside">Contact</div></div></a>
</div>
</div>
</div>
<div class="body"> <!-- This is the body -->
</div>
<div class="footer"> <!-- This is the footer -->
</div>
</div>
