title: Can't get my navigation bar to center on website ASP.Net
body: <p>Here is my Code for the asp.net page and my CSS, hoping someone can find out what I am doing wrong. I'm new to css, and asp.net. I used most of the knowledge I know with Div tags, etc.</p>
  
  <pre><code> &lt;%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="MHConstruction.SiteMaster" %&gt;
  
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link href="~/NewStyles/Site.css" rel="stylesheet" type="text/css" /&gt;
      &lt;asp:ContentPlaceHolder ID="HeadContent" runat="server"&gt;
      &lt;/asp:ContentPlaceHolder&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form runat="server"&gt;
      &lt;div class="page"&gt;
          &lt;div class="header"&gt;
  
          &lt;asp:Image ID="Image1" runat="server" ImageUrl="~/Images/Homes.jpg" ImageAlign="Middle" Width="960px"/&gt;
              &lt;div class="title"&gt;
  
              &lt;/div&gt;
              &lt;div class="loginDisplay" dir="ltr"&gt;
                  &lt;asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false"&gt;
                      &lt;AnonymousTemplate&gt;
                          [ &lt;a href="Login.aspx" ID="HeadLoginStatus" runat="server"&gt;Log In&lt;/a&gt; ]
                      &lt;/AnonymousTemplate&gt;
                      &lt;LoggedInTemplate&gt;
                          Welcome &lt;span class="bold"&gt;&lt;asp:LoginName ID="HeadLoginName" runat="server" /&gt;&lt;/span&gt;!
                          [ &lt;asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/&gt; ]
                      &lt;/LoggedInTemplate&gt;
                  &lt;/asp:LoginView&gt;
              &lt;/div&gt;
              &lt;center&gt;
              &lt;div class="clear hideSkiplink"&gt;
  
                  &lt;asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" &gt;
                      &lt;Items&gt;
                          &lt;asp:MenuItem NavigateUrl="~/HomePage.aspx" Text="Home"/&gt;
                          &lt;asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/&gt;
                          &lt;asp:MenuItem NavigateUrl="~/Basic.aspx" Text="Basic"/&gt;
                          &lt;asp:MenuItem NavigateUrl="~/Standard.aspx" Text="Standard"/&gt;
                          &lt;asp:MenuItem NavigateUrl="~/Luxury.aspx" Text="Luxury"/&gt;
                          &lt;asp:MenuItem NavigateUrl="~/CustomerHome.aspx" Text="Customers"/&gt;
                          &lt;asp:MenuItem NavigateUrl="~/AdminHome.aspx" Text="Admin"/&gt;
                          &lt;asp:MenuItem NavigateUrl="~/Logout.aspx" Text="Logout"/&gt;
                      &lt;/Items&gt;
                  &lt;/asp:Menu&gt;
  
              &lt;/div&gt;
              &lt;/center&gt;
          &lt;/div&gt;
          &lt;div class="main"&gt;
              &lt;asp:ContentPlaceHolder ID="MainContent" runat="server"/&gt;
          &lt;/div&gt;
          &lt;div class="clear"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="footer"&gt;
  
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Also Here is the CSS that I am currently using. I posted just the css that is applied to the nav menu. </p>
  
  <pre><code>    div.hideSkiplink
  {
      background-color:#3a4f63;
      width:100%;
      height: 51px;
  }
  
  
  
  div.menu
  {
      float:right;
      position:relative;
  
      text-align:left;
  }
  
  div.menu ul
  {
      list-style:none;
      position:relative;
      left:35%;
  
  }
  
  div.menu ul li a, div.menu ul li a:visited
  {
      background-color: #465c71;
      border: 1px #4e667d solid;
      color: #dde4ec;
      display: block;
      line-height: 1.35em;
      padding: 4px 20px;
      text-decoration: none;
      white-space: nowrap;
  
  }
  
  div.menu ul li a:hover
  {
      background-color: #bfcbd6;
      color: #465c71;
      text-decoration: none;
  }
  
  div.menu ul li a:active
  {
      background-color: #465c71;
      color: #cfdbe6;
      text-decoration: none;
  }
  </code></pre>