html - 为什么我的最小宽度和最大宽度不适用？

Question

我在媒体查询下的 css 中应用了最小宽度和最大宽度，以使我的网页保持在某个理想宽度内。但是，我的页面似乎没有观察到我的宽度。我不知道为什么。这是我的代码及其在大尺寸和小尺寸下的样子。

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
body {
    margin-top: 10px;
    margin-bottom: 10px;
    min-width: 300px;
    line-height: 1.0em;
    font-family: 'Times New Roman', Times, serif;
    font-size: 4px;
}
.contact-right {
    line-height: 0.8em;
    text-align: left;
}
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
body {
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 1.0em;
    font-family: 'Times New Roman', Times, serif;
    font-size: 4px;
}
.contact-right {
    line-height: 0.8em;
    text-align: right;
}
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
body {
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 1.0em;
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
}
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
body {
    margin-top: 10px;
    margin-bottom: 10px;
    max-width: 992px;
    line-height: 1.2em;
    font-family: 'Times New Roman', Times, serif;
    font-size: 24px;
}
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
body {
    margin-top: 10px;
    margin-bottom: 10px;
    max-width: 992px;
    line-height: 1.2em;
    font-family: 'Times New Roman', Times, serif;
    font-size: 20px;
}
}

可以看到，有一处小于规定的300px，另一处大于992px。

当我将 margin-left/right 更改为 auto 时，我得到以下信息:

Answer 1

将 margin-left 和 margin-right 属性设置为 auto，使元素在网页上居中。

CSS

body{
margin-left:auto;
margin-right:auto;
}