Html ordered list ol, add space between number and text

Question

I want to add space between number of ordered list and text

ex :

 1.     Hello.
 2.     Test.

Space between "1." and "Hello" needs to be increased.

Note: I'm using below style, because i want no. to start with left most

    ol
    {
        word-break: break-all;
    }
    li
    {       
        list-style-position: inside;
        padding: 0;
    }

I want exactly like below image, im able to get everything other than the space between numbering of list and text(marked in the image)

Answer 1

Note that you had .li instead of li in your code

ol {
  word-break: break-all;
  margin: 0;
  padding: 0;
}
ol ol {
    margin-left: 2em;
}
li {
  list-style-position: inside;
  padding: 0;
}
li::before {
  content: "";
  width: 20px;
  display: inline-block;
}

<ol>
  <li>Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello.
    Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello.</li>
  <li>Test.</li>
  <ol>
    <li>Hello.Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello.</li>
    <li>Test.</li>
  </ol>
</ol>

Answer 2

Note:- You can give the space by this code.

<ol style="padding-left:1em">
  <li style="padding-left:1em">Some text</li>
</ol>