css
html {
height: 100%;
width: 100%;
display: table;
}
body {
display: table-row;
}
.mainBody {
display: table-cell;
border: 10px solid blue;
}
Example html
<body>
<div class="mainBody">all your content here</div>
</body>
To add border to every element on page use universal selector '*
' as below:
* {
border: 5px solid #3A5FCD;
}
And finally cheers, it was a simple edit but due to lack to understanding the problem it took such a long time, anyways your sample pic help me to realize your want.
Just replace your body{..} with
body {
margin: 0 auto;
background: #333;
max-width: 1200px;
}
(remove display: table-cell, margin auto will make it horizontal center with max-width)