Just starting to learn HTML, CSS through an online course and currently working on a simple website. The table of contents on my website is centered, but when I resize the browser on my 27-inch iMac, it doesn't stay centered. Any tips? Here's a snippet of my HTML and CSS code:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
font-family: Arial;
margin: 5px 5px;
max-width: 2500px;
padding: 0;
background-color: #DBE4DF;
}
h1 {
text-align: center;
}
.TableofContents {
display: block;
width: auto;
margin-left: 1000px;
}
ol {
list-style-position: inside;
counter-reset: item;
text-align: centre;
}
ol>li {
counter-increment: item;
}
ol ol>li {
display: block;
}
ol ol>li:before {
content: counters(item, ".") ". ";
padding-left: 0px;
margin-left: 10px;
}<h1>Table of Contents</h1>
<div class="TableofContents">
<ol>
<li><a href="#Lecture1">Lecture1: World Wide Web and HTML Basics</a></li>
<ol>
<li><a href="#Lecture1.1">Word Wide Web</a></li>
<li><a href="#Lecture1.2">HTML</a></li>
<li><a href="#Lecture1.3">HTML Tags and Elements</a></li>
<li><a href="#Lecture1.4">Are Computers Stupid?</a></li>
<li><a href="#Lecture1.5">Block Elements vs Inline Elements</a></li>
</ol>
</ol>
</br>
</div>