Hello,
my cs file is this:
*{font-family:Arial, Sans-Serif;}
body{width:100%;margin:0;background-color:#000000;color:grey;}
a{text-decoration:none;color:grey;}
a:hover{text-decoration:underline;color:purple;}
h1{font-size:20px;text-align:center;}
h2{font-size:14px;color:#7773A1;margin-top:10px;}
#PageWrapper{width:100%;background-color:#000000;}
nav{width:80%;height:0px;padding-top:0px;background-color:black;}
nav a{color:#fff;}
.MainMenu{border:1px solid #000000;width:75%;height:19px;background-color:black;padding-left:25%;}
.MainMenu ul li{width:180px;position:relative;z-index:9999;text-align:center; }
.beforeHead{width:100%;background-color:#B92F8F;height:30px;}
header{background-color:white;width:100%;height:140px;background-image:url(Images/Logo.png);background-repeat:no-repeat;background-position:center;}
header a{width:100%;height:86px;display:block;}
section#MainContent{font-size:1em;width:96%;background-color:#000000;color:grey;min-height:505px;padding-left:2%;padding-right:2%;}
footer{width:100%;clear:both;position:relative;bot tom:0px;text-align:center;font-size:0.7em;font-weight:bold;line-height:20px;color:grey;}
.Introduction{font-style:italic;color:#3e3e3e;}
.MyButton{color:White;}
ul.level1{font-size:14px;font-weight:bold;height:19px;line-height:19px;}
ul.level1 .selected{background-color:#000000;}
a.level1{padding-left:25px !important;}
a.level2{background-color:black;padding-left:8px;}
a.level1:hover, a.level2:hover{background-color:white;color:black;}
img{border:0;}
.ErrorMessage{color:red;}
.PleaseWait{height:32px;width:500px;background-image:url(Images/PleaseWait.gif);background-repeat:no-repeat;padding-left:40px;line-height:32px;}
.Attention{border:4px solid red;padding:10px 0;width:100px;margin:auto;display:block;text-align:center;}
.ItemContainer{width:600px;list-style-type:none;clear:both;}
.ItemContainer li{height:300px;width:200px;float:left;}
.ItemContainer li img{width:180px;margin:10px 20px 10px 0;}
.Summary{font-style:italic;display:block;}
.startLogin a{font-size:x-large;color:purple;}
.logIn{float:right;font-weight:bold;padding-right:1%;}
.hr{color:grey;font-size:small;width:50%}
.hr1{color:grey;font-size:small;width:100%}
.contactUs{padding-left:45%;font-size:x-large;}
.textbox{float:right;}


When I am resizing the window the main menu items fall out of place!
I can provide you with the website name if you want to understand what I mean.
All I want is the menu items to be in the middle of the page. When I minimize the page I still want the items to center in the middle of the page.

Please advice and thank you!

It could be caused by all the "position" stuff in your CSS.

Hard to tell without seeing a site as it seems this is quite different from the CSS presented in the book. You could also consider posting this in the CSS forums here at p2p.wrox.com to attract more viewers.

Cheers,

Imar

__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!

I will Imar,
Thank you so much!