Center the menu instead of having it to the left

  • 1
  • Question
  • Updated 5 years ago
  • Answered
Hello,

How do I change the CSS to center the menu, instead of having it to the left. I have tried several things but not able to figure it out. Thank you!

Here is the site http://www.personalpromakeupartist.com

Here is the CSS:

* {
margin: 0;
padding: 0;

}

body {
margin: 20px 0;
background-color:#45322B;
background-repeat:;
background-position:;
background-attachment:;

}

body, th, td, input, textarea {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #372822;

}

form {

}

fieldset {

}

h1, h2, h3 {
margin-top: 1.5em;
color: #372822;
;

}

h1 {
font-size: 3em;

}

h2 {
font-size: 1.1em;
font-weight: bold;
color: #372822;
;

}

h3 {
font-size: 1em;

}

ul, ol {
margin-top: 1.5em;
line-height: 1.8em;

}

ul, ol {
margin-left: 3em;

}

blockquote {
margin-left: 3em;
margin-right: 3em;

}

a {
text-decoration: none;

}

a:hover {
border: none;

}

h1 a, h2 a, h3 a {
border: none;
text-decoration: none;

}

h1 a:hover, h2 a:hover, h3 a:hover {
background: none;

}

/* Wrapper */

#wrapper {

}

/* Header */

#header {
width: 980px;
margin: 0 auto;

}

#menu {
float: left;

}

#menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;

}

#menu li {
float: left;

}

#menu a {
display: block;
float: left;
height: 25px;
margin-right: 1px;
padding: 10px 20px 0 20px;
text-decoration: none;
font-size: 1.1em;
font-weight: bold;
color: #FFFFFF;

}

#menu a:hover {
background: #F3F3F3;
color: #372822;

}

#menu .selected a {
background: #F3F3F3;
color: #2C2E22;

}

/* Logo */

#logo {
width: 978px;
height: 200px;
margin: 0 auto;
height: 263px;
border: 20px solid #F3F3F3;

}

#sys_banner {
width: 978px;
height: 200px;
margin: 0 auto;
height: 263px;

}

#logo h1, #logo h2 {
margin: 0;
padding: 0;

}

#logo h1 {
padding: 100px 5px 0 20px;
color: #FFFFFF;

}

#logo h2 {
padding: 115px 0 0 0;
font-style: italic;

}

#logo p {
clear: left;
margin: 0;
padding: 0 0 0 20px;
line-height: normal;
font-size: 1.2em;
font-weight: bold;

}

#logo a {
color: #FFFFFF;

}

/* Page */

#page {
width: 978px;
margin: 0 auto;
padding: 20px 0px 0 0px;
background: #FFFFFF;
border: 20px solid #F3F3F3;
border-top: none;

}

/* Content */

#content {
float: left;
width: 938px;
padding: 0px 0px 0px 20px;

}

/* Footer */

.sys_footer {
text-align: center;
font-size: 9px;
color: #CCCCCC;

}

.sys_footer a {
color: #FFFFFF;

}

.sys_txt {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #372822;
padding : 1px 0 0 0;
font-size-adjust: none;
font-style : normal;
font-variant : normal;

}

a {
color:#3C7BCF;
}

a img {
border:none;
}

.sys_txt a {
text-decoration: none;

}

.sys_txt a:hover {
text-decoration: none;

}

.sys_txt h1, .sys_txt h2, .sys_txt h3 {
margin-top: 1.5em;

}

.sys_txt h1 a, .sys_txt h2 a, .sys_txt h3 a {
border: none;
text-decoration: none;

}

.sys_txt h1 a:hover, .sys_txt h2 a:hover, .sys_txt h3 a:hover {
background: none;

}

.sys_txt h1 {
letter-spacing: -.075em;
font-size: 3em;

}

.sys_txt h2 {
letter-spacing: -.05em;
font-size: 1.1em;
font-weight: bold;
color: #372822;

}

.sys_txt h3 {
font-size: 1em;

}

.sys_txt h4 {
margin:0;
padding:10px 0 10px 0;

}

.sys_txt h5 {
margin:0;
padding:10px 0 10px 0;

}

.sys_txt h6 {
margin:0;
padding:10px 0 10px 0;

}

.sys_txt p {
margin:0;
padding:5px 0;

}

.sys_txt blockquote {
margin: 0 20px;
padding:15px 0 15px 30px;
padding-left: 1em;
border-left: 5px solid #DDDDDD;

}

.sys_txt ul {
margin : 15px 5px;
padding : 0 35px;
line-height:normal;

}

.sys_txt ul li {
margin : 0;
padding : 2px 0;
line-height:normal;

}
Photo of Amy

Amy

  • 2 Posts
  • 0 Reply Likes

Posted 5 years ago

  • 1
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Amy

It looks like you've managed to sort out this issue yourself in the meantime - when I open your live site, your menu is centered for me - well done!

Here are some tips to optimize your website:
  1. When I look at your Site CSS overrides, it seems that the original CSS code has been copied over to the left-hand side overrides box in full. That shouldn't be done as it can cause unwanted effects. I'd suggest that you go through the code in your overrides box again and remove any tag that is just the same as in the original CSS code. You should only add those code sections which change something about your original CSS.

  2. The images on your home page took a while to load for me. A website that is slow to load can put off your visitors and be punished by search engines. We recommend to use a webfriendly image file size of 20-100KB per image.

If you have any questions on this, please let me know.
Photo of Amy

Amy

  • 2 Posts
  • 0 Reply Likes
Awesome! This site has been the same for a long time so I have just started trying to update it. Thank you so much for the feedback! Really helps!!