this line:

is setting some of the margins on your '#maincontainer' div to be auto. auto means; take a proportion of the available space. Generally, if you set the left and right margins of something to be "auto" it has the effect of aligning it in the middle of the page. This only happens if you give something a specific size (or if it has a specific size). in this case, you are giving the main container a width of 700px; so left and right auto margins will each take ( 50% of ( the width of the page minus 700 px ) ); and that will center the maincontainer div.

Note, that this isn't the same as using text-align: center. text-align: center aligns 'text' (and certain objects) in a container around the container's horizontal center. But, margin-left:auto;margin-right:auto; aligns an object to the center of its container regardless of text alignment rules in that container.