Recently, I encountered an issue with my small HTML and CSS script. Everything was functioning properly until, out of nowhere, a scroll bar appeared on my page even though I had set overflow to hidden. I'm puzzled as to why this scroll bar is showing up. Any assistance on how to resolve this would be highly appreciated.
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>OUZO</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="animate.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<meta charset="UTF-8">
<link rel="shortcut icon" href="images/logo-4.ico">
<script src="jquery.nicescroll.js">
</script>
<script>
$(document).ready(
function() {
$("#video-wrapper").niceScroll();
$("#news-wrapper").niceScroll();
$("#games-wrapper").niceScroll();
$("#music-wrapper").niceScroll();
}
);
</script>
</head>
<body>
<nav align="middle">
<ul>
<li><a href="videos.html"><img src="images/video-menu.png" class="vid" style="height:35px; width:70px; margin-bottom:20px; border-left:8px solid black; border-right:8px solid black;" onmouseover="this.src='images/video-menu-hover.png'"onmouseout="this.src='images/video-menu.png';"></a></li>
<li><a href="#"><img src="images/news-menu.png" class="news" style="height:35px; width:70px; margin-bottom:20px; border-left:8px solid black; border-right:8px solid black;" onmouseover="this.src='images/news-menu-hover.png'"onmouseout="this.src='images/news-menu.png';"></a></li>
<li><a href="#"><img src="images/logo.png" class="home" style="height:80px; width:80px;" onmouseover="this.src='images/logo-hover.png'"onmouseout="this.src='images/logo.png';"></a></li>
<li><a href="#"><img src="images/games-menu.png" class="games" style="height:35px; width:70px; margin-bottom:20px; border-right:8px solid black;border-left:8px solid black;" onmouseover="this.src='images/games-menu-hover.png'"onmouseout="this.src='images/games-menu.png';"></a></li>
<li><a href="#"><img src="images/music-menu.png" class="music" style="height:35px; width:70px; margin-bottom:20px; border-right:8px solid black; border-left:8px solid black;" onmouseover="this.src='images/music-menu-hover.png'"onmouseout="this.src='images/music-menu.png';"></a></li>
</ul>
</nav>
<div class="left-border"></div>
<div class="right-border"></div>
<div class="container">
<div class="content-container">
</div>
<div class="content-container">
</div>
<div class="content-container">
</div>
<div class="content-container">
</div>
<footer>
<img src="images/logo-footer.png" style="height:80px; width:80px;" onmouseover="this.src='images/logo-hover.png'"onmouseout="this.src='images/logo-footer.png';">
</footer>
</body>
</html>
CSS
html, body{
height: 100%;
overflow: hidden;
}
li {
display: inline;
margin-right: .75em;
padding: 2px;
z-index: 0;
}
ul {
position: fixed;
left: 0;
right: 0;;
margin: 0;
padding: 0;
top: 0;
border-bottom: 8px solid black;
border-width: 100%;
background-color: #d8d8d8;
z-index: 0;
}
nav {
margin-top: 4%;
}
a {
font-size: 15px;
color: black;
text-decoration: inherit;
}
.left-border {
position: fixed;
background-color: #d8d8d8;
height: 100%;
width: 10%;
bottom: 0;
left:0;
z-index: -1;
}
.right-border {
position: fixed;
background-color: #d8d8d8;
height: 100%;
width: 10%;
right: 0;
bottom: 0;
z-index: -1;
}
.container {
width: 700px;
height: 680px;
margin-left: 22%;
padding: 0;
margin-top: 7.5%;
background-color: red;
}
.content-container {
float: left;
margin: 2%;
padding: 8.3%;
padding-left: 9%;
width: 200px;
height: 200px;
background-color: #d8d8d8;
z-index: 1;
}
footer{
position: fixed;
bottom: 0;
left: 0;
height:10%;
width:100%;
border-top: 8px solid black;
background-color: #d8d8d8;
z-index: 1;
}
footer img{
position: fixed;
bottom: 0.5%;
left: 45%;
z-index: 1;
}
@font-face {
font-family: Font;
src: url('fonts/font.woff') format('woff'),
url('fonts/font.woff');
}