user1764987 user1764987 - 1 month ago 6
CSS Question

What am I doing wrong with the css in this page not to get the content centralised?

I would like the content in the main part of this page to be down slightly off the heading and in the centre of the page and not sitting on the left margin.

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

Any help you can offer would be much appreciated!

Dan Dan
Answer

To introduce a gap beneath the navigation, add some margin bottom to it:

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

To centralise the main content, give it automatic left and right margins:

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

After the above, the main content will be offset to the left more than desired, due to this CSS that you already have:

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

So remove that margin-left on the row class, or override it specifically for rows within the container:

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

Put it all together and this is what you'll need to add:

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

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

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