Issue when navigating in with inner focusable elements

[thiagoteles]

I have a html structure like this:

<div id='home' class='b-content home'>
<div class='col-md-4 col-sm-4 col-xs-12'>
   <a href='link1.php' class='focusable'>
      <div class='col-md-12'>
         <center><img src='img/icon1.png'></center>
         <h3 class='text-center'>Link 1</h3>
      </div>
   </a>
</div>
<div class='col-md-4 col-sm-4 col-xs-12'>
   <a href='link2.php' class='test focusable'>
      <div class='col-md-12'>
         <center><img src='img/icon2.png'></center>
         <h3 class='text-center'>Link 2</h3>
      </div>
   </a>
</div>
<div class='col-md-4 col-sm-4 col-xs-12'>
<a href='link3.php' class='focusable'>
   <div class='col-md-12'>
      <center><img src='img/icon3.png'></center>
      <h3 class='text-center'>Link 3</h3>
   </div>
</a>
</div>
<div class='col-md-8 col-sm-12 col-xs-12 Mybtns'>

   <div class='col-md-4 col-sm-12 col-xs-12'>
      <a class='focusable btn btn-default center-block btn-lg account' href='#'>
      <i class='fa fa-info'></i> Link 4</a>
   </div>
   <div class='col-md-4 col-sm-12 col-xs-12'>
      <a class='btn btn-default center-block btn-lg account focusable' href='link4.php'>
      <i class='fa fa-clock-o' >
      </i> Link 5</a>
   </div>
   <div class='col-md-4 col-sm-12 col-xs-12'>
      <a href='' class='btn btn-default center-block btn-lg'>
      <i class='fa fa-sign-out' style='padding-top: 0px;'>
      </i> Link 6</a>
   </div>
</div>

Its not working and I cant navigate between blocks. If I put the "a" links outside of div its working fine but its broke all my application links and styles.

How can I navigate with this structure?