How to align my link to the right side of the page?

I have a link on my index page:

<div class="content">
    <a class="buy" href="buy.html">Buy</a> 
</div>

I would like to align it to the right side of my page, I tried:

a.buy{
  color: #2da1c1;
  font-size: small;
  text-decoration: none;
  left: 252px;
  float: left;

}
a.buy:hover
{
color: #f90;
text-decoration: underline;
left: 252px;
float: left;                 
}

But it still located on the left side. (I have included my CSS file in my index.html, and the CSS file already take effect for other elements on the 开发者_运维技巧page)

Try float: right:

a.buy {
    color: #2da1c1;
    font-size: small;
    text-decoration: none;
    float: right;
}
a.buy:hover
{
    color: #f90;
    text-decoration: underline;         
}

Another way would be:

.content {
    position: relative
}
a.buy {
    color: #2da1c1;
    font-size: small;
    text-decoration: none;
    position: absolute;
    right: 0;
}
a.buy:hover
{
    color: #f90;
    text-decoration: underline;         
}

(1) you have float: left; on the example code (2) maybe if you add float: right; to the div it will help?

Try the following:

a.buy{
  color: #2da1c1;
  font-size: small;
  text-decoration: none;
  float: right;

}
a.buy:hover
{
color: #f90;
text-decoration: underline;
}

You may also try:

.content
{
    text-align: right;
}

If you don't want to use float: right, you can change the display property of the link to block, since links are inline by default:

a.buy {
    ...
    text-align: right;
    display: block;
}

You can also use flexbox:

a.buy {
    ...
    display: flex;
    justify-content: flex-end;
}