CSS Wrapper

In documents, we can use a wrapper, to encapsulate all the visual elements (meaning the entire content in the body of a webpage) that we create on the page. With that, we can control the general appearance of these elements in CSS without changing each individual element. In addition, we can set borders, colours, and additional settings for the entire layout.

A general wrapper can look like this:

.pagewrap {     margin-right: auto;     margin-left:  auto;     max-width: 960px;     padding-right: 10px;     padding-left:  10px; }

Instead of a fix width, we set a maximum width, which is better for mobile devices, as the width varies from that of a desktop device.
In the example, 960px is assumed for the maximum screen size of all devices, but 20px deducted for the borders.

Now, you just set up the wrapper as a <div> in your HTML document between the body tags and reference it in the CSS.
A wrapper in the body tag itself is not recommended, as you want to be flexible when having separate elements, such as a sticky footer.