I have been doing web design for a little over a year now, but still have strange things happen on the front end sometimes. I am creating a simple template for personal use using the following code:
<!DOCTYPE html>
<html>
<head>
<title>Matt's Template</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css" type="text/css" />
<link rel="stylesheet" href="CSS/general.css" type="text/css" />
</head>
<body>
<section class="container">
<h1>Matt's Template</h1>
</section>
<!-- Javascript Libraries -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js" ></script>
<!-- My Javscript -->
</body>
</html>
If I view this code in my Chrome browser, it appears that the body is shifted about 15px down from the html tag. However, my css explicitly tells the html and body tags to have no padding or margin. So why is there this space?? This has happened before and I am not really sure how I solved it. There must be some obvious answer. Here is my css too.
html, body {
height:100%;
width:100%;
padding:0;
margin:0;
}
.container {
height:100%;
width:960px;
position:relative;
margin:0 auto;
padding:0;
background:#E0E0E0;
}
The problem is that your <h1> still has its default margin, you have only taken off the default <body> margin of 8px, but not the other elements which have default UA styles. You should look into using a reset so you can 'start from scratch' for each element.