Let's start by styling on the container class that we've just created. For this, let's go to our <style> section and add the following:
<style> .container { width: 960px; } </style>
This will set the width property to the <div> with the class container to 960px.
We want our container to be centered on the page. To do that, we need to add a margin property, as follows:
<style> .container { width: 960px; margin-left: auto; margin-right: auto; }</style>
Adding margin-left: auto; and margin-right: auto; means that the left and right margin are adjusted automatically according to the context of the element, which is the browser window in this case:
There are a lot of ways to center an element with CSS; this is the first ...