I have customized the alignment of li tags for a CSS media query. Take a look at this JFiddle to see how it should appear:
https://jsfiddle.net/4fwx7rbj/1/
The li elements are centered within their container, and the text is aligned with the list images. I attempted to implement this in a media query scenario as well:
https://jsfiddle.net/ro7gj60h/
The goal is for the .half-width div to take up 100vw while maintaining the alignment of the list like in the initial snippet. Unfortunately, it's not working as expected. Can someone provide guidance on what might be missing?
Thank you.
Here's a quick overview of the HTML structure:
<div class="container">
<div class="half-width section3">
<div class="half-width-content">
<div class="middle-text">
<h2>A Headline</h2>
<p>
Some paragraph
</p>
<div class="list-div" id="A">
<ul class="items-list" id="list">
<li class="animation-listener">This is a list item</li>
<li class="animation-listener">This is a list item</li>
<li class="animation-listener">This is a list item</li>
<li class="animation-listener">This is a list item</li>
</ul>
</div>
<img class="hand-writing-img" src="https://fakeimg.pl/498x50/?text=this is some image">
</div>
</div>
</div>
</div>