I'm running into an issue with my HTML/CSS. It seems like my body tag has unexpectedly acquired a margin-top of 10px... However, I've searched high and low but can't seem to figure out how to remove it. This is something that has never happened on any of the other websites I've built, so any assistance would be greatly appreciated.
THE CODE:
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js_plugins/skrollr.js"></script>
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="text.css">
<title>MyPage</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="maincontent">
<section id="maincontent-sect-intro" >
<div id="maincontent-sect-intro-content">
<p class="name-intro">Introduction</p>
</div>
</section>
</div>
</body>
</html>
CSS
body
{
width: 100%;
margin: 0px;
}
div#maincontent
{
min-width: 1000px;
width: 100%;
}
section
{
margin-top: 0px;
height: 550px;
width: 100%;
}
/*
For intro section
*/
section#maincontent-sect-intro
{
background-color: #666666;
text-align: center;
}
div#maincontent-sect-intro-content
{
text-align: center;
}