Styling our class

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 ...

Get Practical Web Design now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.