It is not clear if there is something else in the css code or a css framework that applies rules to the ul, li or other elements that affects the default broswer behaviour. Therefore it is rather difficult to reproduce the behaviour we see in the images, since we don’t know what is really happening to these elements.
Usually the browser apply some left margin or padding to the ul element, to indent it from the other previous and following contents.
From your images, it looks like there is some rules applied to ul that “reset” these values to obtain some kind of horizontal alignment of the text to the other contents, thus putting the list item marker outside of the container box. This is a very used technique: setting margin-left: 0; padding-left: 0; to ul elements.
If you are in this situation, a possible solution would be to set padding-left: 1.0em; to the ul item. The value of 1.0em or 1.25em should be enough to scale with the font size.
Unfortunately, I was not able to reproduce the vertical disalignment between the marker and the text using list-style-position: inside;, so I have no clue what might be the cause.
However, I would note that list-style-position: outside; keep the indentation with multiline contents, whereas inside does not. This might not be your case, if you have very short text items, but it is worth noting.
This is an example with my suggestion. I put a red dotted border on the list item to show the different behaviour between outside and inside marker.
.content {
text-align: justify;
}
.content ul {
margin-left: 0;
padding-left: 0;
}
.content-outside ul {
padding-left: 1.0em;
}
.content-inside ul {
list-style-position: inside;
}
li {
border: 1px dotted red;
} <div>
Folgende Inhalte wurden vermittelt <strong>(Browser defaults)</strong>:
<ul>
<li>Sequi sed et nobis vel sit.</li>
<li>Voluptatum vitae perspiciatis non ut delectus ab illo nisi.</li>
<li>(Very long content that should span on multiple lines) Voluptatum vitae perspiciatis non ut delectus ab illo Voluptatum vitae perspiciatis non ut delectus ab illo Voluptatum vitae perspiciatis non ut delectus ab illo Voluptatum vitae perspiciatis non ut delectus ab illo Voluptatum vitae perspiciatis non ut delectus ab illo Voluptatum vitae perspiciatis non ut delectus ab illo nisi.</li>
</ul>
</div>
<br>
<div class="content content-outside">
Folgende Inhalte wurden vermittelt <strong>(marker outside)</strong>:
<ul>
<li>Sequi sed et nobis vel sit.</li>
<li>Voluptatum vitae perspiciatis non ut delectus ab illo nisi.</li>
<li>(Very long content that should span on multiple lines) Voluptatum vitae perspiciatis non ut delectus ab illo Voluptatum vitae perspiciatis non ut delectus ab illo Voluptatum vitae perspiciatis non ut delectus ab illo Voluptatum vitae perspiciatis non ut delectus ab illo Voluptatum vitae perspiciatis non ut delectus ab illo Voluptatum vitae perspiciatis non ut delectus ab illo nisi.</li>
</ul>
</div>
<br>
<div class="content content-inside">
Folgende Inhalte wurden vermittelt <strong>(marker inside)</strong>:
<ul>
<li>Sequi sed et nobis vel sit.</li>
<li>Voluptatum vitae perspiciatis non ut delectus ab illo nisi.</li>
<li>(Very long content that should span on multiple lines) Voluptatum vitae perspiciatis non ut delectus ab illo Voluptatum vitae perspiciatis non ut delectus ab illo Voluptatum vitae perspiciatis non ut delectus ab illo Voluptatum vitae perspiciatis non ut delectus ab illo Voluptatum vitae perspiciatis non ut delectus ab illo Voluptatum vitae perspiciatis non ut delectus ab illo nisi.</li>
</ul>
</div>
