使用JavaScript修改内联CSS不生效问题求助

我最近在试着用JavaScript调整一个元素的宽度，结果奇怪的是，代码跑起来既没抛出任何错误，但就是默默忽略了这段代码，完全没达到我想要的效果，实在搞不懂哪里出问题了😭。

我写的代码如下：

JavaScript 代码 #

pageSettings = {
  'padding': 16    
}
document.querySelector('#container').style.setProperty(
  'width',
  `calc(100vw - (20em + ${pageSettings['padding'] * 2}px)) !important;`
)

HTML 代码 #

<div class='container' id='container'>
  <p>Content</p>
</div>

有没有大佬能帮我看看问题出在哪呀？

备注：内容来源于stack exchange，提问作者stysan