FILES: css/base.css

Step 1

Open up your base.css file.

Step 2

You are then presented with this. Of course theres more, but this is all we will be working with! Next, just simply add the style rule “text-align:center;” to your file, anywhere between the brackets in your body style as shown below. This just tells the server to center all the text in the body of the website. Of course it’s not text we are trying to center, its the container, but it recognizes it as a text element, and thus centers it.

body {
  margin: 0;
  background-color: #1d1f2c;
  font: 9pt/1.5em Arial, Tahoma, Verdana, "Lucida Grande", sans-serif;
  color: #333;
  text-align:center;
}

Step 3

Now take a look at this, which is what you will be working with next. Now, you will need to adjust your width of the container. You can use whatever you’d like, but please note that if you choose to do something rather smaller, you will have to edit some element sizes of the website not explained in this tutorial. We will be working with 1000px.

Step 4

Last step, is to add the rule “text-align:left;” to the container style. This tells the container to align everything to the left, as opposed to the center which is what the body style tells it to do. In other words, it makes the container look the same as it was before when it was a full page.

#container {
  margin: 0 auto;
  width:1000px;
  text-align:left;
}

And thats pretty much it!