For anyone following lol

Okay, I've narrowed down the issue, I had the image somewhere it shouldn't have been, now I am trying to place a class in a tag without shifting the text in the button.

Here's the snippet I've focused on that seems to be where the problem is

<nav class="float">
<div>
<ul>
<li>
<a href="#"><div> home</div>
</a>
</li>
<li class="button2">
<a href="#">
<div>what we do</div>
</a>
</li>
<li class="button2">
<a href="#">
<div>projects</div>
</a>
</li>
<li class="button2">
<a href="#">
<div>careers</div>
</a>
</li>
<li class="button2">
<a href="">
<div>contact</div>
</a>
</li>
<li class="button2">
<a href="#">
<div> site map</div>
</a>
</li>
</ul>
</div>
</nav>



And the CSS



.button2
{
width: 100px;
background-color: #b2cce5;
padding-left: 30px;
line-height: 2em;
display: block;
margin: 14px;
padding: 0px;

}

nav div ul li a div
{
background: url("../layout4/images/unpressed-arrow.png");
background-repeat: no-repeat;
text-align: center;
color: #fff;
text-indent: 10px;
text-decoration: none;
}


.button2 a:hover
{
width: 100px;
display: block;
text-decoration: none;
color: #fff;
background: url("../layout4/images/pressed-arrow.png");
background-repeat: no-repeat;


}