Even using Firebug, I'm having trouble figuring out why there is overlap with my Menu items and logo. The site I need help with is:
Can anyone help me figure out where in my CSS I can make these items span evenly and wider?
This is my current code from style.css for these elements, however I'm wondering if I need to change something in grid.css and if so, what:
html,
body {
min-width:1000px;
height:100%;
}
body{
background: #f3eeea;
color: #9b9d93;
font: 100%/1.25em Arial, Helvetica, sans-serif;
position:relative;
}
#main {
min-height: 100%;
}
.container {
font-size:.75em;
}
.bottom-indent {
padding-bottom: 98px;
}
.page-template-page-splash-php .bottom-indent {
padding: 0;
height:755px;
}
/* List styling */
dl dt {
background:url(images/list-arrow.gif) no-repeat 0 3px;
padding:0 0 3px 32px;
margin-bottom:.2em;
font-size:18px;
line-height:1.2em;
color:#191919;
}
dl dd {
padding:0 0 0 32px;
margin:0 0 1.5em 0;
}
/* Header
---------------------------------------- */
#header {
height:197px;
position:relative;
z-index:999;
background-repeat:repeat-x;
background-position:0 0;
background-image:url(images/tail-top.png);
}
/* Logo */
.logo {
position:absolute;
left:0;
top:0;
}
.logo h1,
.logo h2 {
font-size:3em;
line-height:1.2em;
margin-bottom:0;
}
.logo h1 a,
.logo h2 a {
color:#222;
text-decoration:none;
}
.logo .tagline {
font-size:10px;
text-transform:uppercase;
}