当子元素被限定在父元素以内，想要突破父元素的约束，可以按照下面的方式解决

<AppSeparator class="-mx-[4.5rem] w-[calc(100%+9rem)]" />
  
如果只有w属性是不行的,如:
<AppSeparator class="w-[calc(100%+9rem)]" />
  
分析:
只使用 w-[calc(100%+144px)] 而不配合负外边距时会发生的情况。让我们更详细地分析一下这种情况：
  
1>默认对齐：
HTML 元素默认是左对齐的。当你增加元素的宽度而不改变其位置时，它会向右扩展。
  
2>宽度计算：
w-[calc(100%+144px)] 使元素宽度等于父元素宽度加上144px。这额外的宽度会全部添加到右侧。
  
3>视觉效果：
左侧：元素的左边缘与父元素的左边缘完全对齐。
右侧：元素的右边缘会超出父元素右边缘144px。
  
4>潜在问题：
可能导致水平滚动条出现。
可能干扰页面上其他元素的布局。
右侧内容可能被截断或隐藏，取决于父元素的 overflow 属性设置。
  
要实现两侧均匀扩展的效果，我们需要配合使用负外边距：
class="w-[calc(100%+144px)] -mx-[72px]"
  
这个组合做到了：
1>增加总宽度（通过 w-[calc(100%+144px)]）
2>向左移动72px（通过 -mx-[72px] 的左侧负外边距）
3>向右扩展72px（通过宽度增加和右侧负外边距的组合效果）
  
结果是元素看起来向两侧各扩展了72px，同时保持了中心对齐。
  
注意:只使用 -ml-[72px] 也可以解决问题，但是为了方便维护代码，还是左右两边都加.与 -ml-[4.5rem] 的对比：
负左外边距会直接影响元素的位置，使其向左移动。
负右外边距通常不会改变元素的位置，除非有特定的布局情况