HTML/CSS Formatting Issue w/ Chrome

[Otaku_MasterRace]

I am working on a project in my high school Web Design course in which we are required to use Adobe Dreamweaver to construct a website using HTML and CSS, which we then published to the Internet. My issue is with an ordered list which i have centered on the webpage. In Adobe Dreamweaver, every section of the list appears perfectly centered and aligned,  but when viewed in Google Chrome, the column of numbers align to the left of the page, with the list content(the text within the <li> tags) remaining centered. I assume that this is due to Chrome, and requires a change in the way I have centered the ordered list. If anyone could help me with this, I would greatly appreciate it. 

 

Here is the selector for the <ol> in CSS: 

 

ol {
    text-align: center;
}

 

The ordered list is nested directly inside the body in the HTML. Attached is a screenshot of my webpage when opened in Chrome.

 

I am aware of the off position of the table, and it is on my to-do list to fix.

  

[minibois]

So you want the number to be aligned properly with the corresponding list entry? Or do you want the number gone?

[Otaku_MasterRace]

So you want the number to be aligned properly with the corresponding list entry? Or do you want the number gone?

Sorry, I should have clarified. Yes, I want the numbers to be aligned properly with the list entries.

[leodaniel]

Mhh if I understand your problem right, add following code:

list-style-position:inside;

This should fix your problem! If not, can you give the html code?

[minibois]

Sorry, I should have clarified. Yes, I want the numbers to be aligned properly with the list entries.

Mhh if I understand your problem right, add following code:

list-style-position:inside;

This should fix your problem! If not, can you give the html code?

Have you tried this? (Also, I recommend following your topic to be notified of new replies)

[Ariito]

put your list into a <div> and style the div using padding, margin w/e