如何正确应用响应式设计中元素的边距？

Question

我正在使用此网址上的粘性添加到购物车框：https://www.tresor-ethnique.com/collections/africain/products/pendentif-multi-couche-africain

基本上我希望左边的图像有5％的边距，而右边的按钮也有5％的边距

我将最大宽度设置为1550px

所以这是我的代码：

.sticky_addcart_wrapper {
    margin-left: 5%;
    margin-right: 5%;
    max-width: 1550px;
}

它完全符合我想要的1920px宽屏幕桌面

但如果我缩小窗口的宽度，我会看到添加到购物车按钮略微偏离窗口（然后右边距完全消失）

左侧表现得像我想的那样（它保持左边距）

也许我为右侧行为写错了什么？

非常感谢任何想法，谢谢：）

Answer 1

您的包装器没有定义宽度，并且在缩小屏幕尺寸时仍然尊重max-width 1550px。如果你只是为包装器添加一个宽度，它可以按照需要工作：

.sticky_addcart_wrapper {
    margin-left: 5%;
    margin-right: 5%;
    width: 90%;
    max-width: 1550px;
}