css custom<li>定位在媒体查询中未按预期工作

我创建了一个自定义对齐方式 li 我要在CSS媒体查询中使用的标记。下面是一个jfiddle的外观:

https://jsfiddle.net/4fwx7rbj/1/

这个 锂 在容器中居中,文本与列表图像居中。现在我尝试将它与媒体查询一起使用:

https://jsfiddle.net/ro7gj60h/

应该发生的是, .half-width div取 100vw 列表会像在第一个片段中一样对齐。然而,这并没有达到预期的效果,有人能帮我什么我错过了吗?

谢谢。

这里的HTML可以快速浏览:

  <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>