How do I remove the little space between my nav bar and main div, as well as the footer? I've tried adjusting margins, padding, and more, but nothing seems to work.
I've gone over the code multiple times and even searched on Google for a solution, but it's just confusing me further.
Since I'm new to coding, there's a high chance I may be making some silly mistakes :).
<!DOCTYPE html>
<html lang = "en" >
<head>
<base href = "D:\workstation\my webpages\3rd day\" />
<title>
Home
</title>
<link rel = "stylesheet" type = "text/css" href= "style.css" />
</head>
<body >
<nav id = "top-menu" >
<ul>
<li><a href = "home.html">Home</a></li>
<li><a href = "rock.html">Rock</a></li>
<li><a href = "paper.html">Paper</a></li>
<li><a href = "sci.html">Scissor</a></li>
<li><a href = "contact.html">Contact</a></li>
<li><a href = "buy.html">Buy</a></li>
</ul>
</nav>
<div id = "maindiv" >
<header>
<hgroup>
<h1> Rock Paper Scissors Corporation </h1>
<h2>Who Will Win!?</h2>
</hgroup>
<p>Oh, the suspense!</p>
</header>
<p class = "message" > Game status: Using HTML5 Drag and Drop</p>
<div class = "clear" ></div>
</div> <!-- main div ends here -->
<footer class = "foot">
<p>Copyright © 2017 Hamza waqar practice document</p>
</footer>
</body>
</html>
/*css starts from here*/
/*menu formating starts */
body {
width : 100%;
margin: 0;
padding: 0;
background-color : #a60;
}
nav#top-menu {
width: 100%;
height: 40px;
background-color: #531;
margin: 0;
padding: 0;
}
#top-menu ul {
display: block;
list-style-type: none;
width: 600px;
margin: 0 auto;
padding: 0;
}
#top-menu ul li a {
display: block;
float: left;
max-height: 35px;
width: 100px;
margin: 0;
padding: 5px 0;
font-family: tahoma, sans-serif;
font-size: 25px;
text-align: center;
background-color: #531;
text-decoration: none;
color: #da1;
}
#top-menu ul li a:hover { border-bottom: 2px solid brown;}
/*menu ends*/
body, p {
line-height: 1;
font-family: Georgia, serif;
font-size: 16pt;
}
h1, h2, h3, h4, h5, h6 {
font-family: tahoma, sans-serif;
color: #531;
margin: .25ex 12pt;
}
h1 { font-size : 200% }
h2 {
font-size: 130%;
color: #840; }
header p {
font-family: tahoma, sans-serif;
font-weight: bold;
font-style: italic;
font-size: 85%;
margin: .25ex 12pt;
color: #531;
}
#maindiv {
width: 900px;
margin: 0 auto ;
padding : 0;
background-color: #eec;
}
p.message {
width: 766px;
margin: .5ex 0;
font: normal 1em Tahoma, sans-serif;
padding: 3px;
background-color: #da1;
color: black;
margin-left : 20px;
margin-top :20px;
}
section#rpsGame {
margin: 1em;
}
.clear {
margin: 0;
padding: 0;
clear: both;
}
footer.foot {
width : 100%;
margin : 0;
padding :0;
background-color : grey;
height : 40px;
width : 100%;
}
footer.foot p { color: #ccc;
font-size: 70%;
font-family: tahoma, sans-serif;
text-align: center;
margin: 0;
padding: 10px 0;
}