I made a simple addition that took care of the margin issue:
p, div, ol {
margin: 0px;
}
By adding this snippet of code, the margin disappeared as expected.
However, it's important to note that using a generic selector like * is not advised, so it would be advisable to use a more specific selector for better practice.
html,
body {
height: 100%;
}
html {
display: table;
margin: auto;
}
p, div, ol {
margin: 0px;
}
body {
background-color: #BFBFBF;
width: 1180px;
}
#header {
background-color: #EEEEEE;
width: 1180px;
height: 165px;
}
#logo {} #logout {} #navigation {} ul {} ul li {} ul li:hover {} ol {} .todo {} .wip {} .done {} a {} a:visited {} #content {
background-color: #EEEEEE;
}
#footer {
background-color: #35363A;
height: 76px;
}
ul {} li {} .copyright {} form {} #newslettercontent {} .table {
font-size: 12px;
color: #333333;
border-width: 1px;
border-color: #729ea5;
border-collapse: collapse;
}
.table th {
font-size: 12px;
background-color: #acc8cc;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #729ea5;
text-align: left;
}
.table tr {
background-color: #ffffff;
}
.table td {
font-size: 12px;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #729ea5;
}
.table tr:hover {
background-color: #ffff99;
}
<div id="header">
<a href="index.php">
<img id="logo" src="./images/logo.png" />
</a>
<div id="navigation">
<ul>
<a href="./index.php">
<li>Home</li>
</a>
<a href="./newsletter.php">
<li>Newsletter</li>
</a>
<a href="../users/list.php">
<li>User List</li>
</a>
<a href="./admin/index.php">
<li>Admin Panel</li>
</a>
</ul>
</div>
</div>
<div id="content">
<p>
<br />
<h2></h2>
<br />
<br />
<ol>
</ol>
</p>
</div>
<div id="footer">
<p class="copyright"></p>
</div>