Why is website wrapper is not aligning with auto margins in any browser?

[Steven Price]

I have re-written the css and html twice now and I am out of ideas and googling results, anyone able to see the error in my code? The wrapper will not align the website in the center. Very grateful for any insight into the problem.

body {
	font-family: "Times New Roman", Times, serif;
	font-size: 1em;
	text-align:center;
}


h1 { 
	font: bold 2em Lucida Console, Times, serif; 
}
h2 { 
	font: bold 1.5em "Times New Roman", Times, serif; 
}
h3 { 
	font: bold 1.2em Arial, Geneva, Helvetica, sans-serif; 
}


}
#wrapper {
	text-align:left;
	width: 900px;
	margin-left: auto;
    margin-right: auto;
}

#mainhead {
	text-align: center;
	width: 900px;
}


#navi {
	float: left;
	width: 148px;
	margin-top:10px;
	margin-bottom: 10px;
	
}

.navibox {
	
	width:148px;	
	height: 25px;
	background-image:url(naviboximg.jpg);
	margin-bottom: 2px;
}

#content {
	float: left;
	width: 718px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	padding: 10px;

}

#footer {
	text-align: center;
	/*clear: both;*/
	width: 898px;
}

a:link {
	color :#FEF47E;
}

a:visited {
	color: #FEF47E;
}

a:hover {
	color: #FEF47E;
}

a:active {
	color: #FEF47E;
}

<html>

<link href="cssstyle.css" rel="stylesheet" type="text/css" />

	<head>
	</head>
<body>

	<div id="wrapper">

		<div id="mainhead">

			<h1>Title</h1>
			<h2>sub-heading</h2>

		</div>

		<div id="navi">
			<div class="navibox">
			</div>
			<div class="navibox">
			</div>
			<div class="navibox">
			</div>
			<div class="navibox">
			</div>
		</div>

		<div id="content">
			<br />
			<p> blah blah blah </p>
			<br />
		</div>

		<div id="footer">
			<p> blah blah </p>
		</div>




	</div>

</body>

</html>

[JKing]

Line #20 in your CSS you have an extra }.

You should be declaring a doctype in your html as well. Other than that everything looks okay to me.