How Website will more or less look: Hey guys,

I build small personal to small business websites. For some reason the website I've made won't center. The header, links and everything else are all on the left instead of the middle of the page as I indicated. In the code I've taken out the background images, etc so it's just half the links and header appearing.
http://restless-rawr.net/val/CakesOttawa.html#
Here is the .css code:

/* CSS Document */

/*Resets & Basic Page Setup*/
* { margin: 0; padding: 0; }
html { overflow-y: scroll; }
body { 
    font: 10px Century Gothic, Sans-serif; 
    background: url(images/.jpg) top left no-repeat; 
}
	  
ul { list-style: none inside; }
p { font-size: 1.1em; line-height: 1.2em: margin-bottom: 1.2em; color: #000000 }
    p.metadata { background: url(); padding: 3px;}
a { outline: none; }
a img { border: none; }

p2 {    font-family: Century Gothic, serif;
        font-size: 10px
        font-weight: normal;
        Color: #0c5806;
        }

h1 {
	font-family: Georgia, serif;
	font-size: 1.8em;
	color: #8ef421;
}

h1#logo {
	width: 426px;
	height: 147px;
	background: url(images/imagesnew/header2.jpg) no-repeat center center;
	text-indent: -9999px;
}
 
li {
        font-size: 1.2em;
        color: #ffffff
}


/*End Reset*/


/*Toolbox*/
.floatleft { float: left;}
.floatright { float: right; }
.clear { clear: both; }
/*End toolbox*/

/*Structure and stuff*/
#page-wrap {
	width: 950px
	margin: 0 auto;
	background: url() repeat-y;
    }
    #main-content {
	    padding: 0px 0px 0px 0px;		
	}
    #article-area {
	width: 400px;
	float: left;
    }
    #sidebar {
	 width: 0px;
	 float: right; 
     }

ul#nav {
}
    ul#nav li {
	    display: inline;
        }
ul#nav li a {
	display: block;
	height: 24px;
	text-indent: -9999px;	
	float: left;
}
ul#nav li.Home a {
	width: 71px;
	background: url(images/imagesnew/links_09.jpg) bottom center no-repeat;
}

ul#nav li.News a {
	width: 83px;
	background: url(images/imagesnew/links_10.jpg) bottom center no-repeat;
}

ul#nav li.Cakes a {
	width: 91px;
	background: url(images/imagesnew/Links_11.jpg) bottom center no-repeat;
}

ul#nav li.Pricing a {
	width: 103px;
	background: url(images/imagesnew/Links_12.jpg) bottom center no-repeat;
}

ul#nav li.Contact a {
	width: 78px;
	background: url(images/imagesnew/Links_13.jpg) bottom center no-repeat;
}
ul#nav li a:hover {
	background-position: center center;
}

ul#nav li a:active {
	background-position: top top;
}

#footer {
	min-height: 19px;
	background: url() no-repeat;	
}

/*End Structure*/

Try this for you CSS:

/*Resets & Basic Page Setup*/
* { margin: 0; padding: 0; }
html { overflow-y: scroll; }
body { 
    font: 10px Century Gothic, Sans-serif; 
    background: url(images/.jpg) top left no-repeat; 
}
      
ul { list-style: none inside; }
p { font-size: 1.1em; line-height: 1.2em: margin-bottom: 1.2em; color: #000000 }
    p.metadata { background: url(); padding: 3px;}
a { outline: none; }
a img { border: none; }

p2 {    font-family: Century Gothic, serif;
        font-size: 10px
        font-weight: normal;
        Color: #0c5806;
        }

h1 {
    font-family: Georgia, serif;
    font-size: 1.8em;
    color: #8ef421;
}

h1#logo {
    margin: 0 auto;
    width: 426px;
    height: 147px;
    background: url(http://restless-rawr.net/val/images/imagesnew/header2.jpg) no-repeat center center;
    text-indent: -9999px;
}
 
li {
        font-size: 1.2em;
        color: #ffffff
}


/*End Reset*/


/*Toolbox*/
.floatleft { float: left;}
.floatright { float: right; }
.clear { clear: both; }
/*End toolbox*/

/*Structure and stuff*/
#page-wrap {
    width: 950px;
    margin: 0 auto;
    background: url() repeat-y;
    }
    #main-content {
        padding: 0px 0px 0px 0px;        
    }
    #article-area {
    width: 400px;
    float: left;
    }
    #sidebar {
     width: 0px;
     float: right; 
     }
     #nav-container{
         width: 600px;
        margin: 0 auto;
     }

ul#nav {
}
    ul#nav li {
        display: inline;
        }
ul#nav li a {
    display: block;
    height: 24px;
    text-indent: -9999px;    
    float: left;
}
ul#nav li.Home a {
    width: 71px;
    background: url(http://restless-rawr.net/val/images/imagesnew/links_09.jpg) bottom center no-repeat;
}

ul#nav li.News a {
    width: 83px;
    background: url(http://restless-rawr.net/val/images/imagesnew/links_10.jpg) bottom center no-repeat;
}

ul#nav li.Cakes a {
    width: 91px;
    background: url(http://restless-rawr.net/val/images/imagesnew/Links_11.jpg) bottom center no-repeat;
}

ul#nav li.Pricing a {
    width: 103px;
    background: url(http://restless-rawr.net/val/images/imagesnew/Links_12.jpg) bottom center no-repeat;
}

ul#nav li.Contact a {
    width: 78px;
    background: url(http://restless-rawr.net/val/images/imagesnew/Links_13.jpg) bottom center no-repeat;
}
ul#nav li a:hover {
    background-position: center;
}

ul#nav li a:active {
    background-position: top;
}

#footer {
    min-height: 19px;
    background: url() no-repeat;    
}

/*End Structure*/

And try this for your HTML:

<body>
<div id="page-wrap">
    <h1 id="logo">Cakes Ottawa!</h1> 
    <div id="nav-container"> 
        <ul id="nav">
            <li class="Home"><a href="#"></a></li>
            <li class="News"><a href="#"></a></li>
            <li class="Cakes"><a href="#"></a></li>
            <li class="Pricing"><a href="#"></a></li>
            <li class="Contact"><a href="#"></a></li>
        </ul>
    </div>
    <div id="main-content">
        <div id="article-area"></div>
        <div id="sidebar"></div>
        <div class="clear"></div>
    </div>
    <div id="footer"></div>
</div>
</body>

Notice that I added the "nav-container" DIV as well as a closing DIV for your page-wrap container.

Hey thankyou (: It worked. Now I just have to figure out why half my links arent showing up haha.

EDIT: Figure it out. Jesus I kept looking at it. it's amazing how a capital can screw everything up XD

Glad I could be of assistance