html - 我在这个页面中的 css 做错了什么而不是集中内容？

Question

我希望此页面主要部分的内容略微偏离标题并位于页面中央，而不是位于左边距。

https://www.comparestonehengetours.com/tour/products.php?q=Christmas+Day+Traditional+Lunch+Cruise+on+the+River+Thames

如果您能提供任何帮助，我们将不胜感激!

Answer 1

要在导航下方引入空白，请为其添加一些边距底部:

#mj-righttop {
    margin-bottom: 25px;
}

为了集中主要内容，给它自动的左右边距:

.site-content.container {
    margin-left: auto;
    margin-right: auto;
}

在上面之后，由于你已经有了这个 CSS，主要内容将比期望的更向左偏移:

@media (min-width: 1200px) {
    .row {
        margin-left: -30px;
    }
}

因此删除行类上的 margin-left，或者专门为容器中的行覆盖它:

.site-content.container .row {
    margin-left: auto;
}

将它们放在一起，这就是您需要添加的内容:

#mj-righttop {
    margin-bottom: 25px;
}

.site-content.container {
    margin-left: auto;
    margin-right: auto;
}

.site-content.container .row {
    margin-left: auto;
}