The CSS code has to go either into the style section of Web Developers   web page or an external style sheet. Here’s how to customize the code:

The above style sets the side column for your navigation bar to 20% of the width of the browser window. Consequently, the left margin of the column containing your content is also set to start at 20% from the left edge of the browser window, otherwise your content will overlap with your navigation bar.

If you prefer that the width of the side column be wider or narrower, just change both the margin-left and width properties to the same value.

You can also use pixels for the width instead of a percentage. For example, to constrain your navigation bar column to 200 pixels, change each of the 20% values to 200px instead. The use of pixels is useful if you have a picture (such as a logo) that you want to place in the side column and don’t want the column to be narrower than your image.

The code above puts the navigation menu in the left column, just like what you see on this page. If you prefer that the navigation menu be on the right, as is commonly found in blogs, change the code so that it looks like the following:

#content {
  margin-right: 20% ;
}
#navbar {
  float: right ;
  width: 20% ;
}
Again, change “20%” to a value appropriate for your site.