Let's dig into the HTML code I've written:
/**
font-family: 'Montserrat Subrayada', sans-serif;
font-family: 'Josefin Sans', sans-serif;
font-family: 'Alex Brush', cursive;
font-family: 'Six Caps', sans-serif;
**/
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
background-color: #fff;
font-size: 100%;
}
#main {
margin: 0;
padding: 0;
position: relative;
height: 100vh;
width: 100%;
background-image: url('../assets/images/bgpattern.png');
}
#vidbox {
margin: 0;
padding: 0;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100vh;
overflow: hidden;
z-index: -1;
}
#bgvid{
width: 100%;
}
#vidfallback{
width: 100%;
}
#navbar {
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
}
#navbar li {
float: right;
}
#navbar li a {
display: block;
color: rgb(35,85,125);
font-family: 'Josefin Sans', sans-serif;
text-decoration: none;
font-size: 28px;
text-align: center;
padding: 35px 40px;
}
#navbar li a:hover{
color: #666;
-webkit-box-shadow:inset 0px -5px 0px 0px rgb(35,85,125);
-moz-box-shadow:inset 0px -5px 0px 0px rgb(35,85,125);
box-shadow:inset 0px -5px 0px 0px rgb(35,85,125);
}
#navbar li a:active{
-webkit-box-shadow:inset 0px -5px 0px 0px rgb(35,85,125);
-moz-box-shadow:inset 0px -5px 0px 0px rgb(35,85,125);
box-shadow:inset 0px -5px 0px 0px rgb(35,85,125);
}
#logo {
height: 80px;
margin: 10px;
}
.left {
float: left!important;
background-color: rgb(35,85,125);
}
.white{
color: #fff!important;
}
#tagline{
font-size: 50px;
font-family: 'Alex Brush', cursive;
margin: 130px;
color: #fff;
}
.bigger{
font-size: 80px;
}
.box{
width: 100%;
height: 200px;
}<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<link rel="stylesheet" type="text/css" href="css/home.css">
<link href="https://fonts.googleapis.com/css?family=Alex+Brush|Josefin+Sans|Montserrat+Subrayada|Six+Caps" rel="stylesheet">
<!--<script src="assets/js/jquery-1.12.3.js" type="text/javascript"></script>-->
</head>
<body>
<div id="main">
<div id="vidbox">
<video autoplay poster="" id="bgvid" loop>
<source src="assets/video/filxe.mp4" type="video/mp4">
<img src="assets/images/vidfallback.png" id="vidfallback">
</video>
</div>
<ul id="navbar">
<li class="left"><img src="assets/images/logomini.png" id="logo"></li>
<li class="left"><a href="" class="white">HK Construction Company</a></li>
<li><a href="#home" id="home">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
</ul>
<h1 id="tagline"><span class="bigger">"</span> You Dream, We Build <span class="bigger">"</span></h1>
</div>
<div class="box about">
</div>
</body>
</html>I'm puzzled by the appearance of a horizontal scroll bar in the browser despite all elements having zero padding and margin. Can someone help me identify the issue?