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.

Answer 2

I'm not sure what is the point of inserting the ul in the ol. But I think if is not mandatory, you should use them separately since you are enumerating same type of elements from what I can see.

Then there are several problems with your margins: your conter has width: calc(1.2em + 1.5vw); but your margins are margin: 0% 3.5% 0% -2.4em; .

I am guessing this is accomplished by trying different values.

But your couter witch has width: calc(1.2em + 1.5vw); is pushing the first element out of the list.

So the margin should consider that if you want the list items to be aligned. So your counter should have the margins something like margin: 0% 3.5% 0% calc(-3.5% - 1.2em - 1.5vw);

I did a working example here . I am not sure if you want it exactly this way, but you can start from here.

But I have to ask: Do you really need one and one or you just use them so you can add before some of the elements the counter? Because it might be better to just use a class (for the counter) and use a sigle list for all elements.