I am having trouble centering my menu on the website. While other elements like images are centered, the menu seems to be off-center.
Below is a snippet of the CSS code related to the menu:
@charset "UTF-8";
/* CSS Document */
#nav {
width:975px; /* six main menu buttons at 150px each */
margin:1 auto; /* Suggested from stackoverflow */
list-style-type:none;
text-align:center;
position: fixed; /* renders the menu bar on top */
top: 0; /* renders the menu bar on top */
z-index: 1000; /* brings the menu bar on top of everything */
display:inline-block;
}
... (CSS properties for different menu items)
.upcoming_events_list li { /* attributes for the upcoming_events list level */
/* CSS to alter the links in the include list when inside the div */
width: 380px;
text-align: left;
list-style-type:circle;
color:blue;
}
... (attributes for different states of links within upcoming_events_list)
Here's an excerpt from the index.shtml page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/ss_template_1.dwt" codeOutsideHTMLIsLocked="false" -->
... (head section with specific styles and scripts)
</body>
Lastly, here's a portion of the included file menu_primary1.shtml:
<ul id="nav">
<li><a href="#">Faith Formation</a>
<ul>
<li><a href="adult_faith_formation.shtml">Adult Faith Formation</a></li>
... (additional nested lists for Parish Groups and Upcoming Events)
Any assistance would be greatly appreciated. Thank you!