ブラウザ用のHTML CSSのヒント

Question

私はhtml、cssに新しいですし、オンラインコースをやっています。だから現時点ではシンプルなウェブサイトを構築する。だから、私のウェブサイトには、中央に位置するコンテンツのテーブルがあります。今私は27インチのイマックに取り組んでいます。したがって、ページの最大幅は大きくなります。しかし、ブラウザのサイズを変更すると、残念ながら私のコンテンツテーブルは真ん中にとどまりません。任意のヒントは素晴らしいものだ。ここに私のHTMLとCSSのコードの一部です：

* { 
 
    -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>

Answer 1

あなたが欲しいマージンに取り組むことです。それは中心にされているものとする.TableofContentsであると仮定すると、CSSは次のようになります。それは余裕の左/右の部分を処理するため

ここ

.TableofContents { 
    margin: 5px auto; 
} 

自動重要です。ここでは、W3Schoolsのリンクがあります。これは、反応的なマージンから始めるべきです。