I'm facing the issue of unwanted white space in the center of the page below the Navigation Bar. Despite numerous attempts to remove it, I haven't been successful.
Below is the HTML code snippet:
html:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="reset.css"/>
</head>
<body>
<div class="header">
<div class="navbar">
<ul>
<li><a>About</a></li>
<li><a>Projects I've worked on</a></li>
<li><a>Impossible List</a></li>
<li><a>Contact</a></li>
</ul>
</div>
<!-- end navbar div-->
<div class="content">
<p id = "title">Srikant Devarajan</p>
</div>
<!--end content div-->
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quidem quae magnam, facilis laborum minus provident. Earum ipsum quo voluptate cumque assumenda quia officiis, eaque suscipit error quae, maxime modi.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quidem quae magnam, facilis laborum minus provident. Earum ipsum quo voluptate cumque assumenda quia officiis, eaque suscipit error quae, maxime modi.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quidem quae magnam, facilis laborum minus provident. Earum ipsum quo voluptate cumque assumenda quia officiis, eaque suscipit error quae, maxime modi.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quidem quae magnam, facilis laborum minus provident. Earum ipsum quo voluptate cumque assumenda quia officiis, eaque suscipit error quae, maxime modi.</p>
<br>
</body>
<!--end body-->
</html>
<!--end html-->
CSS used for styling:
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300);
@import url(http://fonts.googleapis.com/css?family=Lato:300);
html,body{
height:100%;
}
.header{
background: url(images/background5.jpg) no-repeat center center fixed;
background-size: cover;
height:100%;
}
.navbar{
color:white;
list-style: none;
font-family: "Roboto";
text-align:center;
padding:20px;
background-color:black;
opacity:1.0;
filter: alpha(opacity=70);
position:fixed;
top:0;
widows: 100%;
}
.navbar ul{
list-style: none;
}
.navbar li{
display: inline;
padding:70px;
color:#CCCCCC;
}
.navbar a:hover{
color:#fff;
}
.nav a{
display:inline-block;
padding:10px;
opacity:2.0;
}
#title{
margin-top:110px;
font-size:70px;
text-align:center;
color:white;
font-family:'Lato';
}
.content p{
margin-top:70px;
font-size:35px;
text-align:center;
color:white;
font-family:'Lato';
}