This is my code:

```html
<h3 align="center">Is the mobile number above correct ?</h3>
    <div class="yesno"><a href="bugme_pay.php"><div id="yes">YES</div></a>
    &nbsp;&nbsp;&nbsp;<a href="#" class="nope"><div id="no">NO</div></a></div>

```

This is my CSS:

```css
/* yes and no buttons */

#yes
{
    float:left;
    display:inline;
    width:180px;
    background: #999999;
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    color: #FFF;
    padding-top: 10px;padding-bottom: 10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 0.4em;
    margin-top: 0.4em;
}
#yes a:visited,
#yes a:link{
color: #fff;
}

#yes:hover {
background-color: #9fd106;
cursor:pointer;
}

#no
{
    float:right;
    display:inline;
    width:180px;
    background: #999999;
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    color: #FFF;
    padding-top: 10px;padding-bottom: 10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 0.4em;
    margin-top: 0.4em;
}
#no a:visited,
#no a:link{
color: #fff;
}
#no:hover {
background-color: #f20909;
cursor:pointer;
}
.yesno
{
width:400px;
margin-left:100px;
}

```

This is the issue:

![Buttons misaligned](https://i.stack.imgur.com/Ap8E2.jpg)

I also have div switch to hide/show div. This is:

```html
<!--show hide div logic-->
<style> 
div#a {  }
div#b { display:none; }
</style>
<script type="text/javascript">
$("a.nope").click(function(){
                 $("#a").hide();
                 $("#b").show();
                 return false;
         });
         </script>
    <!--//end show hide div logic-->

```