当我最小化页面div扩展到匹配margin属性

Question

所以，我无法弄清楚我在这里做错了什么。 当我将页面缩小到25％时，div正在扩展以匹配CSS代码中的margin属性。

链接到website

我希望它更像是这个方形内容（如果你理解我的意思）： goal

以下是css文件的摘录：

.post{
    border-radius: 25px;
    margin: 250;
    margin-top: 10;
    margin-bottom: 10;
    background-color: rgba(188, 64, 119, 0.4);
    text-align: left;
    padding-bottom: 40;
}

HTML

<div class="post">
            <img id="cat" src="Imgs/cat.png" alt="cat-logo"/>
            <!-- text -->
</div>

我是新手，所以......请耐心等待。

Answer 1

尝试将此添加到您的规则中：

max-width: 970px;
margin: 10px auto;

如果您定义max-width，则容器不能超过此值。 因此，现在您必须在左右两侧使用margin auto集中容器。

Answer 2

你在.post上使用无单位边距 - 这是不好的做法。使用某种相对单位，例如％。如果您将.post { margin: 25; }更改为.post { margin: 25%; }，则放大/缩小时边距不会很奇怪。