javascript - align a simple list ,stays round

Question

hi there I cannot figure out how to align this simple list, as you can see is round but I would like to be straight vertically.

css part:

ol {
    list-style: none;
   
    
  }
  ol li {
    counter-increment: my-awesome-counter;
   
  }
  ol li::before {
    content: counter(my-awesome-counter) ". ";
    color:black;
    font-weight: bold;
    
  }


js part:

             <ol> 
              {testHeaders.map((header, index) => {
                return (
                  <li key={index} value={header}>
                    {header}
                  </li>
                );
              })}
            </ol>

Thanks guys

question from:https://stackoverflow.com/questions/65948972/align-a-simple-list-stays-round

Answer 1

You could do with text-align property

ol li {
     counter-increment: my-awesome-counter;
     text-align:left;
 }