I have a list style of links on the left and some links on the right of topnav. The problem I having is the links do no properly line up so well on the top navigation. The links go off on the right, and the links on the left is not correctly aligned either.

What do I need to do to correct this?

<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="styles/template.css" />
<title>CSS Layout</title>

<div id="layout">

	<div id="topnav">
		<li><a href="#">Text</a></li>
		<li><a href="#">Text</a></li>
		<li><a href="#">Text</a></li>
		<p><a href="#">Facebook</a>&nbsp;&nbsp;<a href="#">Twitter</a></p>


#layout {
  	width: 100%;
  	margin-left: auto;
  	margin-right: auto;

#topnav { 
	width: auto;
	height: 50px;
	margin: 0 auto;
	background-color: #9cf;

#topnav li {
 	display: inline;
 	list-style-type: none;
 	padding-right: 20px;

#topnav p { 
	width: 150px; 
	float: right;
	margin: 0px;