In both Chrome and Firefox, UL list items do not seem to adhere to the parent container's width of 100%. I attempted to use list-style-position: inside;, but unfortunately, that did not solve the issue:
<html style="height: 100%">
<body style="height: 100%">
<div id="mainContainer" style="background: orange; height: 100%;">
<div style="background: #1f1f1f; width: 200px; height: 100%;">
<ul style="list-style-position: inside;">
<li>hello</li>
<li>hello</li>
<li>hello</li>
...
<li>hello</li>
</ul>
</div>
</div>
</body>
Is there someone who can provide guidance on how to ensure that the content of the ul element in the provided example stays within the bounds of the orange div container?