Align list items horizontally in adaptive design

Question

Please see the JSFiddle.

This is an adaptive design with "vw" parameters in the code. I want Text_1, Text_2 and Text_3 be aligned horizontally, which means that when i change the browser's window size, the distance from the left side of the screen to the beginning of the text is the same for those 3 words. With the current code I align them (via "margin" property), but as soon as the browser's window size changes, Text_2 and Text_3 move relatively to Text_1 (to the right when window size dicreases, to the left when it increases). What is wrong in the code please?

<div class="meaning">
<ol class="circle">
<li>Text_1</li>
<ul>
  <li><span class="example">Text_2</span></li>
  <li><span class="example_translated">Text_3</span></li>     
</ul>
</ol>
</div>

.meanings_and_examples {
display: flex;
flex-direction: column;
}

.meaning {
font-family: Tahoma, Geneva, sans-serif;
width: auto;
text-align: left;
color: #1f2c60;
font-weight: 700;
word-wrap: break-word;
text-shadow: 0.06em 0.06em 0.09em rgba(0, 0, 0, 0.2);
margin-right: 1%;
font-size: calc(0.5em + 2.3vw);
}

ol.circle {
list-style-type: none;
}

li {
line-height: calc(1.1em + 1.5vw);
}

ol.circle > li {
counter-increment: item;
margin: 0% 0% 0.2% 1.3em;
}

ol.circle > li::before {
content: counter(item);
display: inline-block;
text-align: center;
border-radius: 100%;
width: calc(1.2em + 1.5vw);
background: #1f2c60;
color: white;
box-shadow: 0.06em 0.06em 0.09em rgba(0, 0, 0, 0.2);
margin: 0% 3.5% 0% -2.4em;
}

ul {
list-style-type: none;
}

.example {
width: auto;
text-align: left;
font-weight: 400;
}

.example_translated {
width: auto;
text-align: left;
font-weight: 400;
color: #5d78e5;
}

Answer 1

Okay, you have a lot of things going on, for your next question I would strip the fiddle of any code that is not needed for the example, all styling and such. Next you are using too many dynamic widths together and as Paulie_D said, you are not allowed to put anything other than li-tags in a ul-tag or ol-tag.

The main issue is that you have two lists, one within the other where the padding is very dynamic, I tried to change it so the padding matched the dynamic width of the bullet.

I kept your HTML and changed some CSS so it behaves like you want but you really should think of a new HTML setup.

.meanings_and_examples {
  display: flex;
  flex-direction: column;
}

.meaning {
  font-family: Tahoma, Geneva, sans-serif;
  width: auto;
  text-align: left;
  color: #1f2c60;
  font-weight: 700;
  word-wrap: break-word;
  text-shadow: 0.06em 0.06em 0.09em rgba(0, 0, 0, 0.2);
  margin-right: 1%;
  font-size: calc(0.5em + 2.3vw);
}

ol.circle {
  list-style-type: none;
  border: 2px solid purple;
  position: relative;
  padding-left: 10vw;
}

li {
  line-height: calc(1.1em + 1.5vw);
 
}

ol.circle > li {
  counter-increment: item;
  margin: 0% 0% 0.2% 0;
  border: 2px solid orange;
  padding: 0;
  position: relative;
 }

ol.circle > li::before {
  content: counter(item);
  display: inline-block;
  text-align: center;
  border-radius: 100%;
  position: absolute;
  background: #1f2c60;
  color: white;
  box-shadow: 0.06em 0.06em 0.09em rgba(0, 0, 0, 0.2);
  width: calc(1.2em + 1.5vw);
  transform: translateX(-100%);
 }

ul {
  list-style-type: none;
  padding-left: 0;
  border: 2px solid red;
}

.example {
  width: auto;
  text-align: left;
  font-weight: 400;
}

.example_translated {
  width: auto;
  text-align: left;
  font-weight: 400;
  color: #5d78e5;
}

<div class="meaning">
<ol class="circle">
  <li>Text_1</li>
   <ul>
      <li><span class="example">Text_2</span></li>
      <li><span class="example_translated">Text_3</span></li>     
   </ul>
</ol>
</div>

See my modified fiddle for the behaviour you requested.