need help fixing the link's clickable area

[axetouch]

Was just amusing myself with a little useless site, practicing this and that.I came across a problem, where the link is only clickable on the left, not the right.how it looks:div, inside it a header(2) with in it a link\[code\] <div class="button one"><h2><a href="http://stackoverflow.com/questions/15671622/#">example</a></h2></div>\[/code\]It has a right border, a hover function and quite a width. It is absolute positioned. Been trying around a bit a came up with following code (it is a bith messy, sorry)\[code\].button{position:absolute;padding:0px;margin:0px;width:300px;height:70px;background-color:#999999;border-left:solid 7px #FF6600;border-bottom:solid 1px #FF6600;border-top:solid 1px #FF6600;}.button h2{padding:0px;margin:0px;text-transform:uppercase;color:#FFFFFF;font-size:1,5em;}a{margin:0px;display:block;text-decoration:none;color:#FFFFFF;padding:20px;}a:hover{background-color:#FF6600;}\[/code\]problem: links are only links up about 1/2 the width. They background color of the hover changes the complete area, but only works when the mouse is in that link area. Not sure where I missed something. All help is appreciated!For those who want to look into the css and html files themselves, i put them in a test.rar file:http://www.sendspace.com/file/pe42e0