Other Help:HTML/HTML5 CSS/CSS3 Automatic alignings and resizings

I'm not sure whether this is the right place to post these sort of requests; I'll be happy to post in a different section if someone points out where I should ask for help.

I have some very basic knowledge of HTML, CSS; I really like HTML5 and CSS3 and now just wanted to make a simple website;

One of the main issues I want to deal with is being able to resize and positions my objects automatically depending on the size of the screen(e.g browser). Is it possible to achieve this?

I currently have a menu and I'd like to center it but don't know how I can do this:

Here's the code:

Code:

<!DOCTYPE html> <html> <head> <TITLE>Title of the Site</TITLE> </head> <link href="css\layout.css" rel="stylesheet" type="text/css"> <body> <div id="titlestyle"> Insert Title </div> <ul id="nav-menu"> <li><a href="#">Home</a></li> <li><a href="#">Category</a> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </body> </html> ===================== CSS body { background-color:#CDCDCD; } #titlestyle{ color:#8C7853; text-align:center; font-family: serif; font-size: 48px; font-weight:bold; } #nav-menu { list-style-type: none; height: 40px; padding: 0px; margin:0; } #nav-menu li { float: left; position: relative; padding: 0; line-height: 40px; background: #8C7853 repeat-x 0 0; } #nav-menu li:hover { background-position: 0 -40px; } #nav-menu li a { display: block; padding: 0px 50px; color: #fff; text-decoration: none; } #nav-menu li a:hover { color: #a3f1d7; } #nav-menu li ul { opacity: 0; position: absolute; left: 0; width: 8em; background: #63867f; list-style-type: none; padding: 0; margin: 0; } #nav-menu li:hover ul { opacity: 1; } #nav-menu li ul li { float: none; position: static; height: 0; line-height: 0; background: none; } #nav-menu li:hover ul li { height: 30px; line-height: 30px; } #nav-menu li ul li a { background: #8C7853; } #nav-menu li ul li a:hover { background: #5a8078; } #nav-menu li { -webkit-transition: all 0.2s; } #nav-menu li a { -webkit-transition: all 0.5s; } #nav-menu li ul { -webkit-transition: all 1s; } #nav-menu li ul li { -webkit-transition: height 0.5s

Can someone tell me how I can put that menu in the middle and also how I can have it across the page horizontally, so that it automatically resize depending on the browser screen size.

Thank you