Your subnav has a width and is positioned absolute. That way you can never align it with that button. I would take the width away from the subnav and make it float right and give it some margin right in order to align it with the contact button.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
background:none repeat scroll 0 0 transparent;
border:0 none;
font-size:100%;
margin:0;
outline:0 none;
padding:0;
vertical-align:baseline;
}
html, body {
background-color:#F9F4EE;
height:100%;
}
img {
vertical-align:bottom;
}
a img {
border:0 none;
}
p {
font:0.75em/1.438em Arial,Helvetica,sans-serif;
padding:0 0 12px;
}
.clearfix {
height:0;
overflow:hidden;
}
.clearfix:after {
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}
#outer {
background:url("../i/gfx_bkg.jpg") repeat-x scroll 0 0 transparent;
}
#wrapper {
margin:0 auto;
position:relative;
width:960px;
}
* html #wrapper, * html #outer {
height:100%;
}
#header-container {
background:url("../i/gfx_header_bkg.gif") repeat-x scroll 0 0 transparent;
height:121px;
position: relative;
}
#header {
height:121px;
margin:0 auto;
position:relative;
width:960px;
}
h1.logo {
float:left;
font-size:0;
text-indent:-9999px;
}
h1.logo a, h1.logo a:link, h1.logo a:visited {
background:url("../i/gfx_nav.png") no-repeat scroll 0 0 transparent;
display:block;
height:121px;
margin:0;
width:296px;
}
#navbar {
display:inline;
float:left;
margin:81px 0 0;
width:640px;
}
#nav {
height:40px;
list-style:none outside none;
margin:0;
overflow:hidden;
padding:0;
width:640px;
}
#nav li {
float:left;
}
#nav li a, #nav li a:link, #nav li a:visited {
display:block;
height:40px;
line-height:40px;
text-decoration:none;
text-indent:-9999px;
}
#nav li.about a {
background:url("../i/gfx_nav.png") no-repeat scroll -296px -81px transparent;
height:40px;
width:73px;
}
#nav li.staff a {
background:url("../i/gfx_nav.png") no-repeat scroll -369px -81px transparent;
height:40px;
width:62px;
}
#nav li.ministries a {
background:url("../i/gfx_nav.png") no-repeat scroll -431px -81px transparent;
height:40px;
width:94px;
}
#nav li.calendar a {
background:url("../i/gfx_nav.png") no-repeat scroll -525px -81px transparent;
height:40px;
width:91px;
}
#nav li.familylifecenter a {
background:url("../i/gfx_nav.png") no-repeat scroll -616px -81px transparent;
height:40px;
width:151px;
}
#nav li.daycare a {
background:url("../i/gfx_nav.png") no-repeat scroll -767px -81px transparent;
height:40px;
width:82px;
}
#nav li.contact a {
background:url("../i/gfx_nav.png") no-repeat scroll -849px -81px transparent;
height:40px;
width:87px;
}
#nav li.about a:hover {
background:url("../i/gfx_nav.png") no-repeat scroll -296px -121px transparent;
height:40px;
width:73px;
}
#nav li.staff a:hover {
background:url("../i/gfx_nav.png") no-repeat scroll -369px -121px transparent;
height:40px;
width:62px;
}
#nav li.ministries a:hover {
background:url("../i/gfx_nav.png") no-repeat scroll -431px -121px transparent;
height:40px;
width:94px;
}
#nav li.calendar a:hover {
background:url("../i/gfx_nav.png") no-repeat scroll -525px -121px transparent;
height:40px;
width:91px;
}
#nav li.familylifecenter a:hover {
background:url("../i/gfx_nav.png") no-repeat scroll -616px -121px transparent;
height:40px;
width:151px;
}
#nav li.daycare a:hover {
background:url("../i/gfx_nav.png") no-repeat scroll -767px -121px transparent;
height:40px;
width:82px;
}
#nav li.contact a:hover {
background:url("../i/gfx_nav.png") no-repeat scroll -849px -121px transparent;
height:40px;
width:87px;
}
#nav li.about a.current {
background:url("../i/gfx_nav.png") no-repeat scroll -296px -161px transparent;
height:40px;
width:73px;
}
#nav li.staff a.current {
background:url("../i/gfx_nav.png") no-repeat scroll -369px -161px transparent;
height:40px;
width:62px;
}
#nav li.ministries a.current {
background:url("../i/gfx_nav.png") no-repeat scroll -431px -161px transparent;
height:40px;
width:94px;
}
#nav li.calendar a.current {
background:url("../i/gfx_nav.png") no-repeat scroll -525px -161px transparent;
height:40px;
width:91px;
}
#nav li.familylifecenter a.current {
background:url("../i/gfx_nav.png") no-repeat scroll -616px -161px transparent;
height:40px;
width:151px;
}
#nav li.daycare a.current {
background:url("../i/gfx_nav.png") no-repeat scroll -767px -161px transparent;
height:40px;
width:82px;
}
#nav li.contact a.current {
background:url("../i/gfx_nav.png") no-repeat scroll -849px -161px transparent;
height:40px;
width:87px;
}
#subnav {
font:12px/14px Arial,Helvetica,sans-serif;
float: right;
position: relative;
clear: right;
}
#subnav ul {
height:14px;
line-height:14px;
list-style:none outside none;
overflow:hidden;
text-decoration:none;
}
#subnav li {
border-left:1px solid #BBBBBB;
float:left;
}
#subnav li a, #subnav li a:link, #subnav li a:visited {
color:#949494;
display:block;
height:14px;
line-height:14px;
margin:0 8px;
text-decoration:none;
}
#subnav li a:hover {
color:#BBBBBB;
text-decoration:underline;
}
#subnav li a.last {
border-right:1px solid #BBBBBB;
padding:0 8px 0 0;
}
#main {
background:url("../i/gfx_bkg_main.png") no-repeat scroll 0 0 white;
height:100%;
margin:0 0 0 34px;
overflow:hidden;
padding:20px;
width:862px;
}
#left {
float:left;
padding:0 13px 0 0;
width:525px;
}
#left h2 {
border-bottom:2px solid #688D98;
font:2em/1.4em 'Yanone Kaffeesatz',Arial,serif;
margin:0 0 12px;
}
#right {
float:left;
padding:0 0 0 14px;
width:310px;
}
.box1 {
background-color:#FAF9E0;
border-left:13px solid #E5E264;
margin:0 0 10px;
padding:12px 15px;
}
.box2 {
background-color:#ECECD7;
border-left:13px solid #A2A138;
margin:0 0 10px;
padding:12px 15px;
}
.box3 {
background-color:#E1E8EA;
border-left:13px solid #688D98;
margin:0 0 10px;
padding:12px 15px;
}
#right h2 {
font:bold 0.8em/1.4em Arial,Helvetica,sans-serif;
text-transform:uppercase;
}
#footer {
background:url("../i/gfx_bkg_footer.png") no-repeat scroll 0 0 transparent;
height:60px;
margin:0 0 0 34px;
padding:15px 20px 0;
width:902px;
}
#footer p {
color:#CCCCCC;
font:0.625em/1em Arial,Arial,Helvetica,sans-serif;
padding-bottom:6px;
text-transform:uppercase;
}
#footer a, #footer a:link, #footer a:visited {
color:#CCCCCC;
text-decoration:underline;
}
#footer a:hover {
color:#CC0000;
}
#footer a.plug {
color:#CCCCCC;
text-decoration:none;
}
#footer a.plug :hover {
color:#CCCCCC;
text-decoration:none;
}
.floatRight {
float:right;
margin:0 0 8px 8px;
}
.floatLeft {
float:left;
margin:0 8px 8px 0;
}
input, textarea, select {
border-width:1px;
font:0.75em/1em Arial,Helvetica,sans-serif;
margin:0;
padding:1px;
}
.textInput {
margin:0;
padding:0;
}
#signup {
height:22px;
margin:0;
padding:0;
}
input#email {
margin:0 2px 8px 0;
}
</style>
</head>
<body>
<div id="outer">
<div id="header-container" class="clearfix">
<div id="header">
<h1 class="logo"><a href="#" title="First Baptist Church Clinton Tennessee">First Baptist Church Clinton Tennessee</a></h1>
<div id="subnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Location / Directions</a></li>
<li><a href="#" class="last">Photo Gallery</a></li>
</ul>
</div><!--end subnav-->
<div id="navbar">
<ul id="nav">
<li class="about"><a href="about">About</a></li>
<li class="staff"><a href="staff/">Staff</a></li>
<li class="ministries"><a href="ministries/">Ministries</a></li>
<li class="calendar"><a href="calendar/">Calendar</a></li>
<li class="familylifecenter"><a href="family-life-center/">Family Life Center</a></li>
<li class="daycare"><a href="daycare/">Daycare</a></li>
<li class="contact"><a href="contact/">Contact</a></li>
</ul><!--end nav-->
</div><!--end navbar-->
</div><!--end header-->
</div><!--end header container-->
<div id="wrapper">
<div id="main">
<div class="anythingSlider">
<div class="slideshow">
<ul>
<li><img src="i/gfx_slide1.jpg" alt="" width="862" height="236" /></li>
<li><img src="i/gfx_slide2.jpg" alt="" width="862" height="236" /></li>
</ul>
</div>
</div><!--end slideshow-->
<div id="left">
<h2>Welcome to First Baptist Clinton Tennessee</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<h2>Upcoming Events</h2>
<p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
</div><!--end left-->
<div id="right">
<div class="box1">
<h2>Email Newsletter</h2>
<p>Sign up to receive breaking news as well as receive other site updates!</p>
<div id="signup">
<form id="form1" name="form1" method="post" action="">
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input name="email" type="text" id="email" tabindex="1" value="email address" size="26" /></td>
<td><input type="image" src="i/btn_go.gif" name="go" id="go" value="Go" alt="Go" tabindex="1" /></td>
</tr>
</table>
</form>
</div><!--end signup-->
</div><!--end box1-->
<div class="box2">
<h2><img src="i/gfx_photo_gallery.jpg" alt="Photo Gallery" width="115" height="86" class="floatRight" />Photo Gallery</h2>
<p>Check out the latest photos from our past community events here. </p>
</div><!--end box2-->
<div class="box3">
<h2>Find Us On Facebook</h2>
<img src="i/gfx_facebook.jpg" alt="Find Us On Facebook" width="57" height="57" class="floatLeft" />
<p>Keep up-to-date with the latest First Baptist Clinton information by following us on Facebook. </p>
</div><!--end box3-->
</div><!--end right-->
</div><!--end main-->
<div id="footer">
<p>First Baptist Church of Clinton, Tennessee. 225 N. Main Street, Clinton, TN 37716 T: (865) 457-9353 F; (865) 457-0713 E: <a href="#">info@fbclinton.org</a></p>
<p>© Copyright 2010. All Rights Reserved. <a href="http://www.t2graphicdesign.com" target="_blank" class="plug">Website Design by T2 Design.</a></p>
</div><!--end footer-->
</div><!--end wrapper-->
</div><!--end outer-->
</body>
</html>
I didn’t have your images so I didn’t apply any margins to subnav to align them with the contact button