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