960 grid system, extending the color - css

Question

I have two questions
How would i go about centering the buttons inside the grid?
how do i get The colors to overflow to fill the extent of the page
<title>Virtual Harrogate!</title>
<header class="container_12 a-new-homepage">
<nav>
<div>
<ul>
<div class="grid_12">
<li class="grid_2 alpha">
Login
</li>
<li class="grid_2">
Right Now
</li>
<li class="grid_2">
Features
</li>
<li class="grid_2">
Event
</li>
<li class="grid_2">
About us
</li>
<li class="grid_2 omega">
Contact Us
</li>
</div>
</ul>
</div>
</nav>
</header>
and heres my layout.css, I havent altered the 960.css or text.css in any way
/* This is where the Format of every page and its tags are defined -- will be superceeding my styles.css */
.a-new-homepage{
background: #2a2a2a; /* charcoal grey */
overflow-x:visible;
overflow-y:visible;
bottom-border: 20px;
}
/* Header = define the h elements and the page header
-------------------------------------------------------------------------------------------------------------*/
h1 {
text-align: center;
text-transform: uppercase;
text-decoration: underline;
background-color: #78679A /* purple */
}
h2 {
}
h3 {
}
h4 {
}
h5 {
}
h6 {
}
nav ul { /* removes all formatting from the list elements which we will go on to define */
margin: 0;
padding: 0;
}
nav li{
list-style-type: none;
float: right;
font-size: 12px;
padding: 0 0 0 0;
text-transform: uppercase;
}
nav li .a-button { /* sets the width and height of the class a-button locally (first number = top n bottom, second = left n right) */
padding: 5px 15px;
}
/* buttons
--------------------------------------------------------------------------------------------------------------*/
.a-button {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#CCFE8B), to(#99C757));
background:-moz-linear-gradient(100% 100% 90deg, #99C757, #CCFE8B);
background-color:#ededed;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
border:1px solid #6f9a4d;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:10px 15px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
text-align: center;
text-transform: uppercase;
}
.a-button:hover {
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#CCFE8B), to(#99C757));
background:-moz-linear-gradient(100% 100% 90deg, #99C757, #CCFE8B);
background-color:#ededed;
}
.a-button:active {
position:relative;
top:1px;
/* Tabs = The the inpage tabs
--------------------------------------------------------------------------------------------------------------*/
li.a-tab {
list-style-type: none;
float: center;
display: inline-block;
border-top:solid;
border-right: solid;
border-left: solid;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
font-size: 16px;
margin:0 10px; 0 10px;
}

Answer 1

I don't know what you mean by getting the colors to overflow to fill the extent of the page? Which colors are you talking about? And where are they overflowing to on the page?
Anyway, to center your buttons you can take off the float:right property off your < li> tags. Then you can change those same < li>'s to be display:inline or display:inline-block. Then if you put a text-align:center on your tag it will put the buttons in the middle top of your page.